Несоответствие стиля colgroup col с colspan

Question

Я пытаюсь выделить столбец с ячейками, которые используют атрибут span, например, всеобъемлющую ячейку заголовка.

Я попробовал это самым очевидным способом, используя colgroup а также col тег. К сожалению, это дает противоречивые результаты. Общая ячейка выделяется первым столбцом, который охватывает ее, но не последовательными (см. Пример ниже).

Я вижу, что при использовании цвета фона на разных цветах, тогда общая ячейка, если она подсвечена, должна иметь оба цвета, что невозможно. Следовательно, я думаю, что самый последовательный результат будет то, что он не получает цвета. Может быть, какой-то атрибут или так я могу установить, чтобы получить последовательное выделение?

Тест: https://jsfiddle.net/m13d2arf/1/

.highlight {
  background-color: red;
}
th, td {
  border: 1px solid;
}

<table>
  <colgroup>
    <col class="highlight">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th colspan="2">1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
    </tr>
  </tbody>
</table>

<br>

<table>
  <colgroup>
    <col>
    <col class="highlight">
  </colgroup>
  <thead>
    <tr>
      <th colspan="2">1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
    </tr>
  </tbody>
</table>

Answer 1

В качестве обходного пути вы можете переопределить цвет фона элемента th.

th {
  background-color: white;
}

---

.highlight {
  background-color: red;
}
th {
  background-color: white;
}
th, td {
  border: 1px solid;
}

<table>
  <colgroup>
    <col class="highlight">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th colspan="2">1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
    </tr>
  </tbody>
</table>

<br>

<table>
  <colgroup>
    <col>
    <col class="highlight">
  </colgroup>
  <thead>
    <tr>
      <th colspan="2">1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
    </tr>
  </tbody>
</table>