Table colgroup col style inconsistency with colspan - html

Question

I am trying to highlight a column with cells that use the span attribute, like a overarching header cell.
I tried it in the most obvious way by using the colgroup and col tag. Unfortunately, this delivers inconsistent results. An overarching cell is highlighted with the first column that spans it but not with consecutive ones (see the example below).
I can see that when using background color on different cols then the overarching cell, if highlighted, would have to have both colors which is not possible. Hence, I think the most consistent result would be that it gets no color. Maybe there some attribute or so I can set to get consistent highlighting?
Test: 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

As a workaround you can override the background color on the th element.
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>