Is there a way to adjust the CSS so that the border color of the thead cells show over the background color of cells with unique columns? I have a table with sticky headers and rows containing unique column spans with background colors, and when scrolling, the background color overlaps the border color. Here is the relevant CSS:
table {
border-collapse: collapse;
position: relative;
}
table, th, td {
border: 2px solid black;
}
th, td {
padding: .5rem 1rem;
}
td[colspan] {
text-align: center;
background-color: red;
color: white;
}
table thead:first-child th {
position: sticky;
top: 0;
background-color: white;
}<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>row1 col 1</td>
<td>row1 col 2</td>
<td>row1 col 3</td>
</tr>
<tr>
<td colspan="3">row2 col 1</td>
</tr>
<tr>
<td>row3 col 1</td>
<td>row3 col 2</td>
<td>row3 col 3</td>
</tr>
<tr>
<td>row4 col 1</td>
<td>row4 col 2</td>
<td>row4 col 3</td>
</tr>
<tr>
<td>row5 col 1</td>
<td>row5 col 2</td>
<td>row5 col 3</td>
</tr>
<tr>
<td>row6 col 1</td>
<td>row6 col 2</td>
<td>row6 col 3</td>
</tr>
<tr>
<td>row7 col 1</td>
<td>row7 col 2</td>
<td>row7 col 3</td>
</tr>
<tr>
<td>row8 col 1</td>
<td>row8 col 2</td>
<td>row8 col 3</td>
</tr>
<tr>
<td>row9 col 1</td>
<td>row9 col 2</td>
<td>row9 col 3</td>
</tr>
<tr>
<td>row10 col 1</td>
<td>row10 col 2</td>
<td>row10 col 3</td>
</tr>
<tr>
<td>row11 col 1</td>
<td>row11 col 2</td>
<td>row11 col 3</td>
</tr>
<tr>
<td>row12 col 1</td>
<td>row12 col 2</td>
<td>row12 col 3</td>
</tr>
<tr>
<td>row13 col 1</td>
<td>row13 col 2</td>
<td>row13 col 3</td>
</tr>
<tr>
<td>row14 col 1</td>
<td>row14 col 2</td>
<td>row14 col 3</td>
</tr>
<tr>
<td>row15 col 1</td>
<td>row15 col 2</td>
<td>row15 col 3</td>
</tr>
</tbody>
</table>