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

突出显示表格元素上的列-CSS

1 个答案: