在rowspan td上将元素高度设置为100％？

Question

鉴于此表：

<table>
<tr>
  <td rowspan="2"><a>Hello</a></td>
  <td><a>World</a></td>
</tr>
<tr>
  <td><a>!</a></td>
</tr>
</table>

我想将每个a中的td元素设置为100％高度：

table, td {
  border: 1px solid black;
}
td {
  height:400px;
}
a {
  background-color: red;
  height: 100%;
  display:block;
}

This (JsFiddle)适用于IE和Chrome。但是Firefox似乎对colspan有问题。

所以我尝试更改tr上的给定固定高度，而不是td：

table, td {
  border: 1px solid black;
  height: 100%
}
tr {
  height:400px;
}
a {
  background-color: red;
  height: 100%;
  display:block;
}

This (JsFiddle)适用于Firefox和Chrome，但不适用于IE。

右边是我想要的：

如何在所有浏览器中完成此工作？

Answer 1

如果你想要更多地控制TD，我强烈建议使用table和table-cell的display选项：

.table-wrapper{
  position:relative;
  display:table;
  width:100%;
  height:400px;
  border:1px solid #000;
}

.table-wrapper a{
  position:relative;
  display:table-cell;
  height:100%;
  text-align:center;
  vertical-align:middle;
}

您可以轻松选择宽度，并控制＆＃34; table-cell＆＃34;的内容。这得到了IE9的支持。

演示链接：https://jsfiddle.net/keinchy/mq3nafje/6/