固定布局的宽度为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，那么它也可以正常工作。但是，如果我有一行跨越多个列作为第一行，我就无法使宽度达到我想要的效果。

- adarshr

---

这是什么？https://dev59.com/oW025IYBdhLWcg3wjGtO - Stavm

不是这样的。我不是想让不同的行有不同的宽度。这是关于在固定布局的100%宽度表中共存colspan和唯一宽度的问题。 - adarshr

Answer 1

如果我在表格上删除宽度属性，它会遵守各个列的宽度。如果我将布局更改为table-layout: auto，则也可以正常工作。但是，如果我有一个跨越多列的行作为第一行，我就无法使宽度达到我想要的效果。这就是table-layout: fixed的工作原理。

从这里：https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout 表格和列的宽度由表格和col元素的宽度或第一行单元格的宽度设置。后续行中的单元格不会影响列宽度。

从这里：https://www.w3.org/TR/CSS21/tables.html#fixed-table-layout 通过这种方式，用户代理可以在接收到整个第一行后开始布置表格。后续行中的单元格不会影响列宽度。

因此，实际上：

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

另一个答案有效是因为删除了width属性（正如您在问题中提到的）。如果您回到上面链接的规范，它说：

表格的宽度可以通过'width'属性明确指定。对于'display：table'和'display：inline-table'，'auto'的值表示使用自动表格布局算法。

解决方案：

解决您的问题的方法是以某种方式使表格布局忽略第一行。这是通过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>

- Abhitalks

---

非常好的答案，提供了详细的信息和文档链接，谢谢。 - Nico O

谢谢。我喜欢colgroup的方法 - 它保持了表格的语义化。 - adarshr

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>

- Nico O

---

该Op提到他们已经知道这一点-- "[..]如果我在表格上删除宽度属性，它将遵守各个列的宽度[].." - Abhitalks

@Abhitalks 是正确的。但是似乎 OP 想要一个宽度为 100%，并且在声明的替代方法上遇到了困难。因此，在我看来，这应该是期望的解决方案。 - Nico O

啊..好的，尼科。谢谢。我以为你错过了那个。5秒钟后删除我的评论。 - Abhitalks

@Abhitalks 没有造成任何伤害。你可以在那里留下你的评论，因为你的观点是正确的。 - Nico O

谢谢你的回答。我一直遵循你的答案，直到@Abhitalks提出更好的解决方案 :-) - adarshr

@adarshr，感谢您的反馈。您做出了正确的选择。我的答案不如提供的并被正确接受的那个完整。 - Nico O