Colspan и table-layout: исправлено нарушение стиля таблицы

Question

У меня есть таблица, где мне нужно, чтобы строки имели определенную ширину.Но colspan и раскладка таблицы: исправлено нарушение стиля, который я хочу.Обратите внимание, что я могу НЕ изменить что-либо в HTML-коде, я также не могу удалить макет таблицы: исправлено. Можно ли сделать то, что я хочу, только с 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

Ссылка jsfiddle здесь

/*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>

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 в первой строке, она не будет знать, какую ширину дать столбцам во второй строке, и, следовательно, разбиваетих одинаково.

Из MDN исправлено расположение таблицы:

Ширина таблицы и столбца задается шириной элементов таблицы и столбца или шириной первой строкиклеток.Ячейки в последующих строках не влияют на ширину столбцов.

Чтобы обойти это, вы можете определить 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

table-layout:fixed 

применяется, когда ширина таблицы и столбца определяется шириной таблицы и столбца или шириной первого ряда ячеек.Ячейки в других строках не влияют на ширину столбцов - понимание свойств макета таблицы , поэтому необходимо указать таблицу {table-layout: auto! Important;}