border-spacing 产生的间隙不属于任何 HTML 元素，因此无法直接设置背景色；但可通过双 box-shadow 模拟在上下间距区域“染色”，实现视觉上悬停时整行（含间隙）统一着色的效果。

你可能已经发现：`border-spacing` 产生的行间空白并非 dom 元素的一部分，而是表格渲染时的布局留白，因此 `tr:hover { background-color: red }` 只能填充 `

` 自身内容区域，无法覆盖其上方或下方的间距区域。这本质上是 css 渲染模型的限制——背景色只能作用于元素盒模型的 content + padding + border 区域，而 `border-spacing` 属于表格容器（``）的外部间距，完全游离于 `` 盒子之外。

要实现“悬停时整行（含上下间隙）统一变色”的视觉效果，推荐使用 box-shadow 巧妙模拟：

table {
  border-collapse: separate !important;
  border-spacing: 0 5px !important;
}

tr:hover {
  background-color: #ff6b6b; /* 主体行背景 */
  box-shadow: 
    0 5px #ff6b6b,   /* 向下延伸 5px，覆盖下方 border-spacing */
    0 -5px #ff6b6b;  /* 向上延伸 5px，覆盖上方 border-spacing */
}

✅ 原理说明：

• box-shadow 的偏移值（如 0 5px）以

的边界为基准向外投射；

因为 border-spacing: 0 5px 表示行间垂直间距为 5px，所以用 ±5px 的阴影恰好填满相邻两行之间的空白；

两个方向的阴影叠加后，视觉上形成连续、无断裂的高亮条带。

⚠️ 注意事项：

• 确保 table 使用 border-collapse: separate（默认即为此值），collapse 模式下 border-spacing 无效；
• 若表格有 border 或其他 box-shadow，需注意层叠顺序与颜色冲突；
• 阴影颜色应与 background-color 一致，避免色差；
• 此方案兼容现代浏览器（Chrome/Firefox/Safari/Edge ≥ 12），无需额外 polyfill。

? 进阶提示：若需支持更复杂的悬停交互（如渐变、圆角过渡），可结合 transition 对 background-color 和 box-shadow 同时做动画，提升用户体验。