Question

此代码（jsfiddle）：

<table style="border:1px solid black;width:auto;">
<tr>
 <td style="width:100%;">hello.</td>
 <td style="width:100%;">World</td>
</tr>
</table>

生成一个扩展到窗口宽度的表格，第一个td展开以填充。第二个td保持最小尺寸。

根据CSS specification，width属性的百分比是指包含块的宽度。

在这种情况下，我直观地期望两个单元共享多余的宽度。但是，我还没有在规范的表格部分找到任何描述这种情况下确定性行为的内容。

问题：根据CSS规范，这里有什么明确的行为？

注意：我不是在寻找＆＃34;已修复＆＃34;此代码的版本。我只是想了解这段代码的行为，因为它基于官方的CSS规范。

Answer 1

正如我猜的那样，当表格有width:auto甚至width:100%时，两个td在同一张表中有width:100%怎么可能？这意味着100%+100% = 200%。只需第二个td没有宽度，因为第一个td已尝试获取100%的可用宽度，剩余空间将转为第二个td。

我们可以将表格布局设置为固定。请参阅代码段。

table{table-layout:fixed}
td {border:1px solid #ddd;}

    <table style="border:1px solid black;width:100%;">
    <tr>
     <td style="width:100%;">hello.</td>
     <td style="width:100%;">World</td>
    </tr>
    </table>

奇数表格单元格宽度行为

1 个答案: