如何在垂直方向跨兩個單元格的行內均勻分佈單元格高度？

我有以下HTML結構的表：如何在垂直方向跨兩個單元格的行內均勻分佈單元格高度？

<table> 
<tr> 
    <td rowspan=2>A (This is a dynamic column. I don't know its height).</td> 
    <td>B</td> 
    <td rowspan=2>D</td> 
    <td>E</td> 
</tr> 
<tr> 
    <td>C</td> 
    <td>F</td> 
</tr> 
</table>

如果小區A的高度爲200像素，小區B，C，E和與Firefox 19.0觀察當Fc會均勻地分佈自己的100像素的高度瀏覽器。但是，Google Chrome 25.0會顯示相同的表格，其中單元格B和E的高度恰好足以包含其內容，單元格C和F佔用剩餘空間。

DEMO in JsFiddle

我的問題是，我該如何平均分配這些細胞的高度沒有CSS指定單元格的高度？編輯：我的目標是當細胞A的高度發生變化時，讓內部細胞均勻分佈。

來源

2013-04-08 Question Overflow

我有同樣的問題。這裏是我的數據表在IE8中的外觀FF23 第二個圖像是它在Chrome中的外觀& Opera（注意藍色突出顯示底部行如何擴展以填充高度）。

IE8 & FF23

Chrome & Opera12

答案是，你不能就我都試過了。這就是底層瀏覽器如何處理標準。 IE & FF會將單元格均勻地分配到右側Chrome & Opera只是擴展底部單元以填充高度。您可以做的最好的做法是將底部行垂直對齊，以便至少所有數據都在一起。

來源

2013-08-09 14:19:45

你應該在css中設置td的高度。因此你不需要指定高度爲#A。

如果你想的cell A設置高度爲100像素，設置td高度，以50像素

這裏是fiddle

來源

2013-04-08 04:46:19 Sharun

我的目標是讓細胞A在高度變化時使內部細胞均勻分佈。對不起，如果我不夠清楚。 – 2013-04-08 04:57:21

通過設置td高度，您還可以設置單元格A的高度（這是td高度的兩倍）。這將適用於您提供結構的表格。 – Sharun 2013-04-08 05:05:15

單元格A的高度假設是動態的，而不是靜態的。所以，我不知道爲TD設置什麼高度。 – 2013-04-08 05:15:22

如何在垂直方向跨兩個單元格的行內均勻分佈單元格高度？

回答

相關問題