Another way of doing the above is follow this article, in short:
table:has(tr > *:nth-child(1):hover) tr > *:nth-child(1),
table:has(tr > *:nth-child(2):hover) tr > *:nth-child(2),
table:has(tr > *:nth-child(3):hover) tr > *:nth-child(3),
table:has(tr > *:nth-child(4):hover) tr > *:nth-child(4) {
background: var(--col);
}
/* GENERIC DEMO STYLES */
table {
--col: #00f4;
--row: #0002;
border-collapse: collapse;
}
thead tr {
background: #0883;
}
table tr > * {
padding: 1em;
border: 1px solid;
}
tbody > tr:hover {
background: var(--row);
}
<table>
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
<td>3.1</td>
<td>4.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
<td>3.2</td>
<td>4.2</td>
</tr>
<tr>
<td>1.3</td>
<td>2.3</td>
<td>3.3</td>
<td>4.3</td>
</tr>
<tr>
<td>1.4</td>
<td>2.4</td>
<td>3.4</td>
<td>4.4</td>
</tr>
</tbody>
</table>