Question

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

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


“width”属性的值为“auto”的列元素设置该列的宽度。


否则，第一行中“width”属性的值为“auto”的单元格将确定该列的宽度。如果单元格跨越多个列，则宽度将在列上分开。



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


表格的宽度是表格元素的'width'属性值和列宽的总和（加上单元格间距或边框）的较大值。

我对此的理解是：

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

但是 - 在下面的示例中，我有一个包含三个单元格的行的表。使用<col>元素将每列的宽度设置为100像素。 table元素没有分配宽度，而<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

您对规则的解释是正确的。问题是未设置表格的宽度，因此浏览器无法与列宽度总和进行比较。只需设置表的宽度，即使$('#btnBack').attr("disabled",true);也可以。

＆＃13;

width: 0px

＆＃13;

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

1 个答案: