react-table表格sticky headers滚动时未完全遮挡下方表格数据问题

解决方案 #

你遇到的表头透出问题基本是层级和背景透明导致的，按以下步骤排查即可解决：

1. 首先修改你的表头CSS，补充不透明背景和层级设置，这是最常见的诱因：

th {
  position: sticky;
  top: 0; /* required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
  font-size: 14px;
  /* 新增内容 */
  background-color: #fff;
  z-index: 10;
}

2. 若修改后依旧存在问题，按以下方向排查：

• 检查th的所有父级元素（thead、table、表格外层包裹容器）是否设置了overflow: hidden/overflow: auto属性：如果是全局滚动固定表头的场景，不要给table的直接父元素设置overflow属性，否则会改变sticky定位的上下文；如果是容器内滚动的场景，需要给滚动容器设置固定高度，th的sticky效果才会相对于容器正常生效。
• 排查父元素是否设置了transform、perspective、filter属性：以上属性会导致sticky定位失效或者层级异常，移除对应属性即可恢复正常。
• 检查react-table默认注入的样式是否存在td/tr的z-index高于th的情况，适当调高th的z-index值即可解决。
• 不要给th设置小于1的opacity，也不要使用半透明的background属性，否则下方滚动的内容会透过半透明表头显示。

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