具有固定布局 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>

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

Answer 1

如果我删除桌子上的宽度属性，它会尊重个人 列宽。如果我将布局更改为 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>

Answer 2

说实话，我不能完全告诉你“为什么”。但是，如果您将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>