html - 尝试在表格边界内的表格标题和单元格中创建悬停状态，并且不移动内容

Question

询问这是否可能 - 尝试在每个单元格的边界上的表格中创建悬停状态 - 但不是在外部。查看屏幕截图。我试图使用 box-shadow 但是你，运气不好。还使用边框移动悬停时的内容。谢谢。有任何想法吗？我尝试了很多东西。这些表是用数据表和动态数据生成的。

Answer 1

如何使用:before 伪元素进行样式显示？类似于以下内容:

td, th{
  position:relative;
  padding:10px;
  border:1px solid lightgray;
}
th:hover:before{
  position:absolute;
  content:"";
  background-color:green;
  width:100%;
  height:2px;
  display:block;
  left:0;
  top:0;
}

tr:hover td:first-of-type:before{
  position:absolute;
  content:"";
  background-color:green;
  width:2px;
  height:100%;
  display:block;
  left:0;
  top:0;
}

<table>
  <thead>
    <tr>
      <th>head1</th>
      <th>head2</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>cell1</td><td>cell2</td></tr>
    <tr><td>cell3</td><td>cell4</td></tr>
  </tbody>
</table>

我编辑了代码以使用 tr:hover td:first-of-type:before 来突出显示行而不是每个单元格。