表格使用sticky/relative定位时box-shadow在Chrome中失效问题

我给表格第一列设置了position: sticky; left: 0和box-shadow效果，Firefox里显示正常，但Chrome中阴影完全不生效。试过调整z-index，换成relative定位也没用。

原代码 #

CSS：

table {
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
  border: 1px solid black;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

tr td:first-child {
  position: sticky;
  left: 0;
  z-index: 100;
  background-color: skyblue;
  box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5);
  -webkit-box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5);
}

HTML：

<table>
  <tr>
    <td>
      <div>Column 1</div>
    </td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>
</table>

问题原因 #

Chrome中，当表格使用border-collapse: collapse时，sticky定位的单元格的box-shadow会被相邻单元格或表格本身的层叠上下文遮挡，单纯调整z-index无法解决——因为表格在这种模式下的单元格层叠规则和Firefox不同。

解决方法 #

方法一：用内部容器承载阴影

利用td内部的div来设置背景和阴影，td只保留sticky定位：

table {
  border-collapse: collapse;
}

th,
td {
  padding: 0; /* 移除td的内边距，交给内部div处理 */
  border: 1px solid black;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  padding: 8px; /* th保留内边距 */
}

tr:nth-child(even) {
  background-color: #dddddd;
}

tr td:first-child {
  position: sticky;
  left: 0;
  z-index: 100;
}

/* 给第一列的内部div加样式 */
tr td:first-child > div {
  padding: 8px;
  background-color: skyblue;
  box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5);
}

/* 其他列的td补回内边距 */
tr td:not(:first-child) {
  padding: 8px;
}

这种方法不需要改动HTML结构，通过内部容器的独立层叠上下文让阴影正常显示。

方法二：修改表格边框模式

把表格的border-collapse改为separate，用border-spacing: 0模拟原边框效果：

table {
  border-collapse: separate;
  border-spacing: 0; /* 消除单元格间距 */
}

th,
td {
  padding: 8px;
  border: 1px solid black;
  text-align: left;
  border-right: none;
  border-bottom: none;
}

/* 修复最后一列和最后一行的边框 */
tr td:last-child, tr th:last-child {
  border-right: 1px solid black;
}

tr:last-child td, tr:last-child th {
  border-bottom: 1px solid black;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

tr td:first-child {
  position: sticky;
  left: 0;
  z-index: 100;
  background-color: skyblue;
  box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5);
}

这种方法保持了td直接设置阴影的逻辑，通过调整表格布局规则让Chrome正确识别阴影。

两种方法都能实现Chrome和Firefox中阴影正常显示，同时保留sticky列的定位效果。

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