height: 100% for anchor tag inside table cell keeping vertical-align

Question

How to align vertically "Foo" Between "Bar" and "Baz" as it do automatically without anchor? I can't use line-height hack, 'cause I want to allow link text to expand cell significantly.

<table>
  <tr>
    <td class="link-wrap">
       <a class="link" href="#">
         Foo
       </a>
    </td>
   <td>Bar<br>Baz</td>
  </tr>
</table>

CSS:

table {
  border-collapse: collapse;
}

td {
  border: 1px solid #ddd;
}

.link-wrap {
  height: 100%;
}

.link {
  display: block;
  background: #afa;
  height: 100%;
}

Sandbox

Answer 1

You want this? jsbin 1

Solution is simple: don't use a display: block with a height. The height is the problem here.

When you want to apply the color to the whole td, then apply the color also to the td and not to an inner element.

---

UPDATE: jsbin 2

Just some magic. What I've done is transforming the <a> tag in a table (with css; so it has all it's properties) and I've created a <span> in it with vertical-align: middle; and display: table-cell;. So it's basically a table in a table. So, the pseudo-table is an <a>: clickable in all its space.