为什么我的固定布局表没有列宽？

Question

根据 CSS 规范，当表格具有 table-layout:fixed 属性时，其宽度计算如下：

...每列的宽度确定如下：

1. “width”属性值不是“auto”的列元素设置该列的宽度。

2. 否则，第一行中“width”属性值不是“auto”的单元格将确定该列的宽度。如果单元格跨越多于一列，则宽度将按列划分。

3. 任何剩余的列均分剩余的水平表空间（减去边框或单元格间距）。

表格的宽度是表格元素的“width”属性值与列宽之和（加上单元格间距或边框）中的较大者。

我对此的理解是：

1. 计算每列的宽度（使用 <col> 元素的 width 属性，如果存在，优先）
2. 列宽总计
3. 如果总列宽大于<table> 元素的width 属性，则表格将与总列宽一样宽。

但是，在下面的示例中，我有一个表格，其中一行包含三个单元格。使用 <col> 元素将每列的宽度设置为 100 像素。表格元素没有分配宽度，它是 <div> 的子元素，宽度为 200 像素。

我希望表格的宽度为 300 像素，因此它会溢出其父级 <div>。然而，相反，该表只有 200 像素宽（即与其父级 <div> 一样宽），因此每列缩小到 66.6 像素宽。 （我检查了最新的 Safari、Chrome、Firefox 和 Edge。）

为什么表格只有 200 像素宽，而不是 300 像素？

<div style="background:black; color:white; width:300px;">300px</div>

<br>

<div style="background:black; color:white; width:200px;">200px</div>

<br>

<div style="width:200px; background:green; overflow:scroll;">
  <table style="table-layout:fixed; border-collapse:collapse;">
    <col style="width:100px;">
    <col style="width:100px;">
    <col style="width:100px;">
    <tr>
      <td>1</td>
      <td>2</td>
      <td style="background:red;">3</td>
    </tr>
  </table>
</div>

（我给<div> 设置了绿色背景，overflow:hidden 和第三个单元格设置了红色背景，以使意外结果更清晰。）

Answer 1

您对规则的解释是正确的。问题是表格的宽度没有设置，所以浏览器无法与列宽总和进行比较。只需设置表格的宽度，即使width: 0px 也可以。

<div style="background:black; color:white; width:300px;">300px</div>

<br>

<div style="background:black; color:white; width:200px;">200px</div>

<br>

<div style="width:200px; background:green; overflow:scroll;">
  <table style="table-layout:fixed; border-collapse:collapse;width:0px">
    <col style="width:100px;">
    <col style="width:100px;">
    <col style="width:100px;">
    <tr>
      <td>1</td>
      <td>2</td>
      <td style="background:red;">3</td>
    </tr>
  </table>
</div>