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>

Here is the visual of what I want

Here is the visual of what I get

Answer 1

table-layout:fixed 

当表格和列的宽度由表格和col的宽度或第一行单元格的宽度设置时适用。其他行中的单元格不影响列宽-table-layout property understanding，因此您需要给出 表{ table-layout：auto！important; }

Answer 2

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

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

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

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

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

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

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

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

Answer 3

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

From MDN about table layout fixed:

  

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

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

Answer 4

jsfiddle link here

/*I think this is the minimal way**/
table {
  table-layout: fixed;
  width: 100%;
}

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

<table>
  <thead>
    <tr class="text-center">
      <th >1</th>
      <th colspan="19">2</th>
    </tr>
  </thead>
  <tbody>
    <tr class="text-center">
      <td>a</td>
      <td colspan="14">b</td>
      <td colspan="2">c</td>
      <td colspan="2">d</td>
      <td>e</td>
    </tr>
     <tr>
      <td>a</td>
      <td colspan="14">b</td>
      <td colspan="2">c</td>
      <td colspan="2">d</td>
      <td>e</td>
    </tr>
     <tr>
      <td>a</td>
      <td colspan="14">b</td>
      <td colspan="2">c</td>
      <td colspan="2">d</td>
      <td>e</td>
    </tr>
  </tbody>