高度：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%;
}

Sandbox

Answer 1

你想要这个吗？ jsbin 1

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

如果要将颜色应用于整个td，则将颜色也应用于td而不是内部元素。

---

更新：jsbin 2

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