выделить столбец на элементе таблицы - CSS

Question

У меня есть таблица, построенная в следующем формате:

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

Я пытаюсь выделить столбец, если столбец заголовка наведен.Допустим, если я наведу второй заголовок <th> from, скажем, синий, то второй <td> из каждого <tr>, который составляет столбец, будет выделен желтым цветом.Как мне этого добиться?Я пробовал много разных способов, но он не выделяет <tr>, только заголовок.Я хотел бы сохранить его в структуре таблицы.Кто-нибудь может помочь с этим?

Answer 1

вы можете сделать что-то вроде этого:

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

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