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

看起来像你的情况的高度算法是欠发现。您希望td {height: auto}扩展所有可用空间，但

'table-row'的'auto'值'auto'表示使用的行高布局是MIN。 MIN取决于细胞盒高度和细胞盒 alignment ....在CSS 2.1中，单元格框的高度是内容所需的最小高度

和最终

CSS 2.1未指定跨越多行的单元格如何影响行高计算除了行高的总和涉及的内容必须足够大，以涵盖跨越行的单元格。

请参阅17.5.3 Table height algorithms

Chrome和IE中的表格大小调整

1 个答案: