设置position: sticky后box-shadow不生效，求原因解析

1. 表格合并边框导致阴影被遮挡 #

你给表格加了border-collapse: collapse，这种模式下单元格边框会合并成一个整体，单元格之间没有空隙，sticky元素的外阴影直接被旁边的单元格压在下方，完全无法显示。

修复方法：
把表格的border-collapse改为separate，同时添加border-spacing: 0，既能保持单元格紧密排列的视觉效果，又能让阴影正常展示：

.table-fixed {
  border-collapse: separate;
  border-spacing: 0;
}

2. 滚动容器裁剪了阴影 #

最外层的overflow-x-auto容器会自动裁剪超出自身范围的内容，sticky元素的阴影刚好处于容器边缘位置，直接被裁剪掉了。

修复方法：
给滚动容器添加左右内边距，为阴影预留显示空间：

.overflow-x-auto {
  padding: 0 8px; /* 数值可根据阴影实际大小调整 */
}

3. z-index层级不足 #

虽然你给sticky元素设置了z-10，但表格内其他单元格的层级可能与之持平，阴影会被相邻单元格的背景色覆盖。

修复方法：
调高sticky元素的z-index值，确保它能压在其他元素上方：

<th class="sticky left-0 top-0 p-4 z-20 shadow-grey ..."></th>
<td class="... sticky left-0 shadow-grey bg-white z-20 ..."></td>

4. 阴影样式本身存在问题 #

检查shadow-grey类的CSS定义，确认是否误写为内阴影（inset），或者阴影颜色过浅、偏移量设置错误，导致视觉上看起来像没显示：

.shadow-grey {
  box-shadow: 2px 0 4px rgba(0,0,0,0.1); /* 适合左侧sticky元素的右侧外阴影示例 */
}

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