React-Table结合TypeScript：滚动时让表头组整体固定在顶部

问题原因 #

你给所有<th>设置了position: sticky且top: 0，导致表头组的两行表头重叠在同一位置，第二行被第一行完全遮挡，所以添加overflow: scroll后无法看到第二行。

解决方案 #

1. 为不同层级表头设置不同的sticky定位值 #

区分分组表头和子表头，给它们设置不同的top值，让它们依次固定在容器顶部，避免重叠：

方式一：通过原生HTML属性区分

利用React Table渲染后表头的role和scope属性，针对性设置样式：

/* 第一级分组表头 */
table th[role="columnheader"][scope="colgroup"] {
  position: sticky;
  top: 0;
  z-index: 101; /* 层级高于子表头，防止被覆盖 */
}

/* 第二级子表头 */
table th[role="columnheader"][scope="col"] {
  position: sticky;
  top: 40px; /* 值等于分组表头的实际高度 */
  z-index: 100;
}

方式二：自定义类名区分

在columns配置中为不同层级表头添加类名，再通过类名设置样式：

{
    Header: 'Author',
    className: 'group-header', // 分组表头类名
    columns: [
        {
            Header: 'First Name',
            accessor: 'author_first',
            className: 'sub-header' // 子表头类名
        },
        {
            Header: 'Last Name',
            accessor: 'author_last',
            className: 'sub-header'
        }
    ],
},

对应的CSS：

.group-header {
  position: sticky;
  top: 0;
  z-index: 101;
}

.sub-header {
  position: sticky;
  top: 40px; /* 匹配分组表头的高度 */
  z-index: 100;
}

2. 调整容器样式 #

容器的justify-content: center会让表格垂直居中，可能导致滚动时表头定位异常，建议移除该属性：

.table-container {
  overflow: scroll;
  display: flex;
  height: 600px;
  width: 90%;
  flex-direction: column;
  align-items: center;
  /* 移除justify-content: center */
}

完成以上设置后，滚动容器时，分组表头会固定在容器顶部，子表头会固定在分组表头下方，不会被遮挡。

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