將行高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> 

我想風格每td的a元素爲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; 
} 

在Firefox和Chrome This (JsFiddle)工作正常，但不能在IE瀏覽器。

在右邊是，我想：

我怎樣才能讓所有的瀏覽器這項工作？

Answer 1

，如果你想在達陣更多的控制，我會強烈建議使用表和表單元格的顯示選項：

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

您可以輕鬆地選擇寬度，並控制「表的內容-細胞」。這由IE9支持。

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