在使用 border-spacing 创建表格行间距时，直接通过 tr:hover 设置背景色无法影响间距区域，因为该间距属于表格容器的空白区域而非行元素本身；可通过双 box-shadow 技巧模拟覆盖效果。

在使用 `border-spacing` 创建表格行间距时，直接通过 `tr:hover` 设置背景色无法影响间距区域，因为该间距属于表格容器的空白区域而非行元素本身；可通过双 `box-shadow` 技巧模拟覆盖效果。

当设置 border-collapse: separate 并配合 border-spacing: 0 5px 时，表格行（

）之间会生成 5px 的垂直空白——但这个空白不属于任何 元素的盒模型范围，因此 tr:hover { background-color: red } 只能填充 自身内容区域，无法延伸至上下间距中。

解决思路是：利用 box-shadow 的扩展性，在不改变布局的前提下，“视觉上”填充间距区域。由于 border-spacing 在行上方和下方各产生 5px 空隙，我们可为悬停的

添加两个方向相反、颜色一致的阴影：

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

tr:hover {
  background-color: #e63946; /* 行自身背景 */
  box-shadow: 
    0 5px #e63946,   /* 向下延伸 5px，覆盖下方间距 */
    0 -5px #e63946;  /* 向上延伸 5px，覆盖上方间距 */
}

✅ 关键说明：

• box-shadow 不影响文档流，不会导致重排；
• 阴影颜色需与 background-color 保持一致，确保视觉连贯；
• 若 border-spacing 值为 0 Npx，则 box-shadow 的偏移量应严格对应 ±Npx；
• 此方案兼容所有现代浏览器（Chrome、Firefox、Safari、Edge ≥79），无需额外 HTML 结构或 JS。

⚠️ 注意事项：

• 不要对 或 应用 hover 背景——这会同时影响所有行，失去逐行交互意义；
  避免在 tr 上设置 padding 或 margin 来“模拟”间距，这会破坏表格语义与可访问性；
  如需支持更复杂的悬停状态（如圆角、渐变），建议改用 grid 或 flex 布局重构数据展示结构，以获得完全可控的样式能力。

  综上，box-shadow 是在保持标准表格语义前提下，实现“带间距的悬停高亮”的简洁、高效且无副作用的解决方案。