具有固定布局 100% 宽度的表格不能具有不相等的列宽

Question

我有一个设置为 100% 宽度的表格，我希望其列获得定义的宽度。但是，我所有的列似乎都有相同的宽度。

.table {
  table-layout: fixed;
  width: 100%;
}

.table th[colspan=4] {
  /* width: 100%; */
}

.table td,
th {
  border: 1px solid #AAA;
  text-align: center;
}

.table td.one {
  width: 10%;
}

.table td.two {
  width: 20%;
}

.table td.three {
  width: 50%;
}

.table td.four {
  width: 20%;
}

<table class="table">
  <tbody>
    <tr>
      <th colspan="4">All Four</th>
    </tr>
    <tr>
      <th colspan="4">All Four</th>
    </tr>
    <tr>
      <td class="one">A</td>
      <td class="two">B</td>
      <td class="three">C</td>
      <td class="four">D</td>
    </tr>
  </tbody>
</table>

如果我删除表格上的 width 属性，它会尊重各个列的宽度。如果我将布局更改为table-layout: auto，那么它也可以工作。但是，如果我有一行跨越多列作为第一行，我就无法获得我想要的宽度。

Answer 1

老实说，我不能确切地告诉你“为什么”。但是，如果您将 更改为width: 100%;，min-width: 100%则会获得所需的结果。我猜是因为如果将宽度设置为100%，则无法计算出每列的整体宽度。

.table {
  table-layout: fixed;
  min-width: 100%;
}

.table th[colspan=4] {
  /* width: 100%; */
}

.table td,
th {
  border: 1px solid #AAA;
  text-align: center;
}

.table td.one {
  width: 10%;
}

.table td.two {
  width: 20%;
}

.table td.three {
  width: 50%;
}

.table td.four {
  width: 20%;
}

<table class="table">
  <tbody>
    <tr>
      <th colspan="4">All Four</th>
    </tr>
    <tr>
      <th colspan="4">All Four</th>
    </tr>
    <tr>
      <td class="one">A</td>
      <td class="two">B</td>
      <td class="three">C</td>
      <td class="four">D</td>
    </tr>
  </tbody>
</table>

Answer 2

如果我删除表格上的 width 属性，它会尊重各个列的宽度。如果我将布局更改为 table-layout: auto，那么它也可以工作。但如果我有一行跨越多列作为第一行，我就无法得到我想要的宽度

这就是table-layout: fixed工作原理。

从这里：https : //developer.mozilla.org/en-US/docs/Web/CSS/table-layout

表格和列的宽度由表格和列元素的宽度或单元格第一行的宽度设置。后续行中的单元格不影响列宽。

从这里开始：https : //www.w3.org/TR/CSS21/tables.html#fixed-table-layout

以这种方式，一旦接收到整个第一行，用户代理就可以开始布置表格。后续行中的单元格不影响列宽。

所以，实际上：

1. 如果您将布局更改为auto，它将使用自动表格布局，并且您的列宽优先于内容大小。
2. 如果您删除width表格上的属性，则它不再使用固定表格布局，并且与auto.

另一个答案有效，因为该width属性已被删除（正如您在问题中提到的那样）。如果您参考上面链接的规格，它会说：

可以使用 'width' 属性明确指定表格的宽度。'auto' 值（对于 'display: table' 和 'display: inline-table'）意味着使用自动表格布局算法。

解决方案：

您的问题的解决方案是以某种方式让表格布局忽略第一行。这是由colgroup/col元素完成的。删除在 上定义宽度的类td，并在 上指定那些cols。

片段：

.table { table-layout: fixed; width: 100%; }
.table td, th {
  border: 1px solid #aaa; 
  text-align: center; padding: 4px;
}
.table col.one { width: 10%; }
.table col.two { width: 20%; }
.table col.three { width: 50%; }
.table col.four { width: 20%; }

<table class="table">
	<colgroup>
		<col class="one"/>
		<col class="two"/>
		<col class="three"/>
		<col class="four"/>
	</colgroup>
  <tbody>
    <tr><th colspan="4">All Four</th></tr>
    <tr><th colspan="4">All Four</th></tr>
    <tr>
      <td >A</td>
      <td >B</td>
      <td >C</td>
      <td >D</td>
    </tr>
  </tbody>
</table>