折叠边框下手风琴项Hover状态上下边框高亮问题

当使用border-collapse: collapse时，表格相邻边框会合并，导致无法单独高亮列表项的上下边框。这里提供两种可行的解决方案：

方法一：用border-spacing替代border-collapse #

把表格的border-collapse改为separate，同时设置border-spacing: 0来模拟折叠边框的视觉效果，这样每个列表项（<tr>）的边框会保持独立，hover时就能正常高亮上下边框：

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

tr {
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}

tr:hover {
  border-top: 2px solid #2196f3;
  border-bottom: 2px solid #2196f3;
}

这种方法操作简单，对原有布局影响最小，适合大多数场景。

方法二：用伪元素模拟上下边框 #

如果必须保留border-collapse: collapse，可以通过伪元素给hover的列表项添加独立的上下边框：

table {
  border-collapse: collapse;
  width: 100%;
}

tr {
  position: relative;
}

/* hover时显示上下边框 */
tr:hover::before,
tr:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #2196f3;
  z-index: 1; /* 避免被单元格内容覆盖 */
}

tr:hover::before {
  top: 0;
}

tr:hover::after {
  bottom: 0;
}

这种方法不需要修改表格的边框折叠属性，适合有特殊边框合并需求的场景。

内容的提问来源于stack exchange，提问作者MarquezMoore