奇怪的表格单元格宽度行为

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 规范，这里的最终行为是什么？

注意：我不是在寻找此代码的“固定”版本。我只是想了解这段代码的行为，因为它是基于官方 CSS 规范的。

Answer 1

我猜，当表有width:auto 甚至width:100% 时，怎么可能两个td 在同一个表中有width:100%。这意味着100%+100% = 200%。只是第二个td 没有宽度，因为第一个td 已经占用了可用的宽度来尝试获取100%，而剩余空间将转到第二个td。

我们可以将表格布局设置为固定。请参阅 sn-p。

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>