突出显示 table 元素上的一列 - CSS

Question

我有一个按以下格式构建的 table：

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

如果 header 列悬停，我会尝试突出显示该列。假设我将第二个 header <th> from 悬停在蓝色上，那么每个 <tr> 中的第二个 <td> 将以黄色突出显示，这使它成为一列。我怎样才能做到这一点？我尝试了很多不同的方法，但它没有突出显示 <tr>，仅突出显示 header。我想将其保存在 table 结构中。有人可以帮忙吗？

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

突出显示 table 元素上的一列 - CSS

highlight a column on table element - CSS

html

css

sass

react-bootstrap-table