highlight a column on table element - CSS

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;
}