0

我有一个HTML 表格
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>

4

1 回答 1

2

似乎您的案例的高度算法未找到。您想td {height: auto}扩展所有可用空间，但是

'table-row' 的 'auto' 的 'height' 值意味着用于布局的行高是 MIN。MIN 取决于单元格框高度和单元格框对齐方式....在 CSS 2.1 中，单元格框的高度是内容所需的最小高度

最后

CSS 2.1 没有指定跨越多行的单元格如何影响行高计算，只是所涉及的行高总和必须足够大以包含跨越行的单元格。

见17.5.3 表高度算法

于 2013-05-07T11:22:21.543 回答