html - 高度：100% 用于表格单元格内的锚标记保持垂直对齐

Question

如何在“Bar”和“Baz”之间垂直对齐“Foo”，因为它在没有锚的情况下自动对齐？我不能使用line-height hack，因为我想让链接文本显着扩展单元格。

<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%;
}

沙盒

Answer 1

你要这个？jsbin 1

解决方案很简单：不要使用display: block带有高度的 a 。高度是这里的问题。

当您想将颜色应用于整个 td 时，请将颜色也应用于 td 而不是内部元素。

---

更新：jsbin 2

只是一些魔法。我所做的是<a>在表格中转换标签（使用 css；因此它具有所有属性），并且我在<span>其中创建了一个vertical-align: middle;和display: table-cell;。所以它基本上是一张桌子。因此，伪表是<a>: 在其所有空间中可点击的。