表格border-spacing存在时单元格间隙hover效果失效的解决方法

我明白你的痛点——border-spacing带来的单元格间隙确实会导致hover事件“漏网”，因为这些空白区域属于<table>而非<tbody>或<tr>。好在不用JS也能解决，只需要通过CSS伪元素扩展hover的触发区域就行，下面是具体方案：

问题根源 #

border-spacing创建的间隙是<table>元素的一部分，不属于任何<tbody>或<tr>，所以鼠标悬停在这些区域时，不会触发你写的:hover规则。

解决方案（纯CSS） #

我们可以给可高亮的<tbody>添加一个伪元素，让它覆盖整个tbody的范围（包括间隙），这样鼠标碰间隙时也能触发tbody的hover，同时不影响tr的hover事件：

修改后的完整CSS代码

.c-table-display { 
  border-spacing: 1px; 
  border-bottom: 1px solid #dedede; 
  width: 100%; 
  overflow: hidden; /* 防止伪元素超出表格范围 */
}
.c-table-display__row-odd { 
  background-color: #f3f7fc; 
  color: #263340; 
  font-size: 12px; 
  font-weight: normal; 
  height: 20px; 
  text-align: left; 
  position: relative; 
  z-index: 1; /* 确保行背景在伪元素上方 */
}
.c-table-display__row-odd>td { vertical-align: middle; padding: 0 4px; }
.c-table-display__row-even { 
  background-color: #deecf8; 
  color: #263340; 
  font-size: 12px; 
  font-weight: normal; 
  height: 20px; 
  text-align: left; 
  position: relative; 
  z-index: 1; /* 确保行背景在伪元素上方 */
}
.c-table-display__row-even>td { vertical-align: middle; padding: 0 4px; }

/* 核心修改：给可高亮tbody添加伪元素覆盖间隙 */
.c-table-display__body--highlightable {
  position: relative; /* 为伪元素提供定位基准 */
}
.c-table-display__body--highlightable::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1px; /* 对应border-spacing:1px，覆盖左侧间隙 */
  right: -1px; /* 覆盖右侧间隙 */
  bottom: 0;
  background: transparent;
  z-index: 0;
  pointer-events: none; /* 允许鼠标事件穿透到下方的tr */
}

.c-table-display__body--highlightable:hover tr { 
  cursor: pointer; 
  background: #E3EBDE; 
}
tr.c-table-display__row--highlightable:hover { 
  background: #FFE56F; 
  cursor: pointer; 
}
.c-table-display__body--highlightable:hover td { vertical-align: middle; padding: 0 4px; }
/* 修复原代码的拼写错误：highlightabe → highlightable */
.c-table-display__row--highlightable:hover td { vertical-align: middle; padding: 0 4px; }

.c-table-display__cell--icon { text-align: center; }
.c-table-display__cell--icon>img { vertical-align: middle; }

为什么这样有效？ #

1. 伪元素覆盖间隙：::before伪元素会填满整个tbody的区域，包括border-spacing产生的1px左右间隙，所以鼠标碰间隙时，实际是悬停在这个伪元素上，从而触发tbody的:hover。
2. 事件穿透不影响tr hover：pointer-events: none让伪元素不拦截鼠标事件，当鼠标移到单元格上时，事件会直接传递给tr，触发tr的hover效果，同时tbody的hover依然生效。
3. 层级确保显示正常：给tr设置z-index:1，保证行的背景色能覆盖伪元素，不会出现显示异常。

另外，我还修复了原CSS里的一个拼写错误：.c-table-display__row--highlightabe少了一个字母'l'，已经改成正确的highlightable。

这样修改后，不管是悬停在单元格、行间隙还是列间隙，都能正常触发tbody和tr的hover效果，完全保留了border-spacing，也不需要任何JS。

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