CSS表格thead设置box-shadow 滚动后表头阴影消失如何解决

阴影消失的核心原因是sticky定位的生效对象和阴影挂载对象不匹配：

• 你仅给thead下的th元素设置了position: sticky，触发滚动时只有th单元格会吸附固定在表格顶部
• thead元素本身始终处于普通文档流中，会随着表格滚动向上移出可视区域，挂载在thead上的box-shadow会跟着thead一同被滚走，最终表现为滚动后阴影消失。

把阴影直接设置在做sticky定位的th元素上即可，同时补充z-index保证阴影层级高于下方滚动的表格内容，避免被内容遮挡：

/* 移除原thead上的box-shadow设置 */
thead th {
  position: sticky;
  top: 0;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  background: white !important;
  /* 阴影直接绑定到固定定位的th上 */
  box-shadow: 0 5px 10px #e1e5ee;
  /* 保证阴影层级在滚动内容上方 */
  z-index: 1;
}

如果遇到相邻th之间阴影断裂、有缝隙的问题，可以额外给th加1px的横向负边距消除间隙，对应补1px的左右内边距保证内容位置不变即可。

• 滚动前阴影正常显示：
  
• 修复前滚动后阴影消失：
  

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