html - Colspan 和表格布局 :fixed break my table style

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>

Here is the visual of what I want

Here is the visual of what I get

Answer 1

表格布局固定意味着表格将使用第一行来定义它的样式——因为第一行的 colspan 为 4，它不知道第二行中的列的宽度，因此会拆分他们平等。

From MDN about table layout fixed:

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

为了解决这个问题，你可以定义一个 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>