Table colgroup col 样式与 colspan 不一致

Question

我正在尝试突出显示包含使用 span 属性的单元格的列，例如总体 header 单元格。

我通过使用 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>