Colspan 和表格布局：修复了破坏我的表格样式的问题

Question

我有一个表，我需要其中的行具有特定的宽度。但是 colspan 和 table-layout:fixed 破坏了我想要的样式。请注意，我无法更改html 代码中的任何内容，也无法删除 table-layout:fixed。我想要的东西只用CSS就能实现吗？或者说除非改变html就无法完成？

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

th,
td {
  border: 1px solid black;
}

th:first-child,
td:first-child {
  width: 5%;
  background-color: lightblue;
}

td:nth-child(2),
tr:last-child th:nth-child(2) {
  width: 70%;
  background-color: lightpink;
}

td:nth-child(3),
th:nth-child(3) {
  width: 10%;
  background-color: lightgreen;
}

td:nth-child(4),
th:nth-child(4) {
  width: 10%;
  background-color: #a9a9a9;
}

td:last-child,
th:nth-child(5) {
  width: 5%;
  background-color: #d4d4d4;
}

<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="4">2</th>
    </tr>
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>d</th>
      <th>e</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
  </tbody>
</table>

这是我想要的视觉效果

这是我得到的视觉效果

Answer 1

表格布局固定意味着表格将使用第一行来定义其样式 - 由于第一行的 colspan 为 4，因此它将不知道为第二行中的列提供什么宽度，因此将它们平均分割。

来自 MDN 关于表布局修复：

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

为了解决这个问题，您可以定义 a colgroup，然后为这些列提供宽度，它们将应用于表格的其余部分：

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

th,
td {
  border: 1px solid black;
}

col:first-child {
  width: 5%;
  background-color: lightblue;
}

col:nth-child(2) {
  width: 70%;
  background-color: lightpink;
}

col:nth-child(3) {
  width: 10%;
  background-color: lightgreen;
}

col:nth-child(4) {
  width: 10%;
  background-color: #a9a9a9;
}

col:nth-child(5) {
  width: 5%;
  background-color: #d4d4d4;
}

<table>
    <colgroup>
        <col>
        <col>
        <col>
        <col>
        <col>
    </colgroup>
  <thead>
    <tr>
      <th class="col1">1</th>
      <th colspan="4">2</th>
    </tr>
    <tr>
      <th class="col1">a</th>
      <th class="col2">b</th>
      <th class="col3">c</th>
      <th class="col4">d</th>
      <th class="col5">e</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
  </tbody>
</table>

如果您无法更改 html，并且必须固定布局，那么您无法对第二行的宽度进行任何操作。

使用纯 css 可以做的最好的事情就是删除固定的布局（您没有解释为什么需要这样做）并只设置 tds 的样式：

table {
  width: 100%;
}

th,
td {
  border: 1px solid black;
}

td:first-child {
  width: 5%;
  background-color: lightblue;
}

td:nth-child(2) {
  width: 70%;
  background-color: lightpink;
}

td:nth-child(3) {
  width: 10%;
  background-color: lightgreen;
}

td:nth-child(4) {
  width: 10%;
  background-color: #a9a9a9;
}

td:nth-child(5) {
  width: 5%;
  background-color: #d4d4d4;
}

<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="4">2</th>
    </tr>
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>d</th>
      <th>e</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
  </tbody>
</table>