html - テーブル colgroup の col スタイルが colspan と一致しない

Question

包括的なヘッダー セルのように、span 属性を使用するセルを含む列を強調表示しようとしています。

colgroupandcolタグを使用して、最も明白な方法で試してみました。残念ながら、これは一貫性のない結果をもたらします。包括的なセルは、それにまたがる最初の列で強調表示されますが、連続する列では強調表示されません (以下の例を参照)。

異なる列で背景色を使用する場合、包括的なセルが強調表示されている場合、両方の色が必要になることがわかりますが、これは不可能です。したがって、最も一貫した結果は、色が得られないことだと思います。一貫した強調表示を取得するために設定できる属性があるのでしょうか？

テスト: 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>