表格tr:hover边框变色异常：仅border-bottom生效border-top不显示问题求助

开发者阿泽

2026-10-7

问题根因

你遇到的是border-collapse: collapse折叠边框模式下的固有渲染规则：相邻行的上下边框重叠时，后渲染的上一行下边框优先级更高，即使给当前hover行的上边框加!important也无法覆盖。

兼容解决方案（适配Firefox 91、带td背景色场景）

无需修改原有HTML结构，仅调整CSS即可：

移除原有的tr边框规则
改用td内阴影模拟边框，完全避开边框叠层问题

修改后的完整CSS代码

table {
  border-collapse: collapse;
  text-align: right;
  cursor: default;
}
th {
  background: #ccc;
  text-align: center;
  /* 表头也加对应的阴影，和单元格样式统一 */
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #fff;
}
.col0 {
  background: #ddd;
}
col {
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
}
.col2 {
  border-right: 1px solid #000;
  border-left: 1px solid #000;
}
/* 移除原有tr边框规则，改用td内阴影模拟边框 */
td {
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #fff;
}
tr:hover td {
  box-shadow: inset 0 1px 0 #000, inset 0 -1px 0 #000;
}
.c0 {
  background: #fff;
}
.c1 {
  background: #f8a;
}
.c2 {
  background: #b3c;
}
.c3 {
  background: #aa6;
}
.c4 {
  background: #cf9;
}
.c5 {
  background: #9dd;
}
.c6 {
  background: #0f8;
}
.c7 {
  background: #44f;
}
.c8 {
  background: #88b;
}