Chrome和IE中的表格單元格大小

Question

我有一個HTML table
需要的細節在JSFiddle中提到。
這在Firefox上運行良好，但它不在Chrome和IE上！ 他們有什麼問題？爲什麼他們在具有固定高度的最後一行中展開單元格，而不是第一列中唯一具有未確定高度的單元格的第二行。
下面是HTML代碼：

<table style="width: 100%;" dir="rtl" cellpadding="0" cellspacing="0"> 
<tr> 
    <td style="height: 100px; width: 176px; background:blue"> 
     this is a fixed size cell 
    </td> 
    <td rowspan="3" style="background:gray; height: 360px;">this cell is spanned 3 rows<br /> lots of content may be placed here</td> 
</tr> 
<tr> 
    <td style="background:red">this should expand depending on gray region</td> 
</tr> 

<tr>  
    <td style="height: 46px; background:blue">this is a fixed size cell</td> 
</tr> 

Answer 1

好像高度算法爲您的情況是underfind。你想td {height: auto}延長所有可用空間，但

A「高度」「自動」的一個「錶行」值意味着佈局使用 行高度是MIN。 MIN取決於單元格框的高度和電池箱 對準....在CSS 2.1，小區框的高度是由內容

和finaly

CSS 2.1確實所需的最小高度不指定跨越多行的單元格如何影響行高計算，除了涉及的行高度 的總和必須足夠大以包含跨行的單元格。

看到17.5.3 Table height algorithms