highlight a column on table element - CSS - html

Question

I have a table constructed in the following format:
<thead>
<th></th>
<th></th>
<th></th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
I'm trying to highlight a column if the header column is hovered. So let's say if I hovered the second header <th> from, say blue, then the second <td> from every <tr>, which makes it a column, will be highlighted in yellow. How can I achieve this? I've tried many different ways but its not highlighting the <tr>, only the header. I would like to keep it in a table structure. Can anybody help with this?

Answer 1

you can do something like this:
<table>
<thead>
<th>head 1</th>
<th>head 2</th>
<th>head 3</th>
</thead>
<tbody>
<tr>
<td>row 1 cell 1</td>
<td>row 1 cell 2</td>
<td>row 1 cell 3</td>
</tr>
<tr>
<td>row 2 cell 1</td>
<td>row 2 cell 2</td>
<td>row 2 cell 3</td>
</tr>
<tr>
<td>row 3 cell 1</td>
<td>row 3 cell 2</td>
<td>row 3 cell 3</td>
</tr>
</tbody>
</table>
and css
table {
overflow: hidden;
}
td, th {
position: relative;
}
th:hover {background-color:blue;}
th:hover::after {
content: "";
position: absolute;
background-color: grey;
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -1;
}