如何让表格行（tr）的box-shadow实现重叠效果？

我来帮你分析下当前方案的问题，然后给出可行的修复思路：

问题根源 #

1. 表格行的布局限制：<tr>默认是display: table-row，这种布局下元素的盒模型是为表格设计的，box-shadow的渲染逻辑和普通块级元素不同，很容易被相邻行覆盖，或者无法延伸到预期位置。
2. z-index不生效的原因：即使给<tr>加了position: relative，表格行的堆叠上下文规则和普通元素不一样，相邻行依然处于同一个堆叠层级，所以设置z-index无法改变它们的覆盖关系。
3. 阴影不连续：你给中间行只加了左右阴影，但首行的底部阴影和中间行顶部、末行的顶部阴影和中间行底部没有衔接点，再加上行布局的限制，自然会出现断层。

修复方案：将阴影应用到<td>元素 #

我们换个思路，把阴影样式绑定到单元格<td>上，同时调整表格的边框规则，让阴影能自然衔接：

第一步：设置表格基础样式 #

确保表格行之间没有空隙，让阴影可以完美衔接：

table {
  border-collapse: collapse;
  width: 100%; /* 可选，根据你的布局需求调整 */
}

第二步：定义选中行的单元格阴影 #

/* 首行选中：顶部+左右阴影 */
tr.selected-top td {
  box-shadow: -5px -5px 5px #000, 5px -5px 5px #000;
  position: relative;
  z-index: 10;
  background-color: #fff; /* 和表格背景色一致，避免阴影缝隙 */
}

/* 中间行选中：仅左右阴影，避免与上下行阴影重叠 */
tr.selected-middle td {
  box-shadow: -5px 0 5px #000, 5px 0 5px #000;
  position: relative;
  z-index: 10;
  background-color: #fff;
}

/* 末行选中：底部+左右阴影 */
tr.selected-bottom td {
  box-shadow: -5px 5px 5px #000, 5px 5px #000;
  position: relative;
  z-index: 10;
  background-color: #fff;
}

为什么这个方案有效？ #

• <td>作为table-cell元素，设置position: relative后，box-shadow可以正确向外扩展，不会被相邻元素轻易覆盖。
• border-collapse: collapse消除了行与行之间的间距，让阴影边缘能完美衔接，形成连续的高亮块。
• 统一设置z-index确保阴影不会被非选中行的内容遮挡。

如果需要更贴合你想要的“整体块”效果，还可以给选中的单元格添加统一的背景色，进一步强化高亮的连贯性。

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