如何为带粘性表头的可滚动表格正确设置固定全边框

边框随内容滚动移位的核心原因是外边框被错误加在了可滚动的<Table>元素上。
启用stickyHeader属性时，MUI会将表头单元格设置为position: sticky实现吸顶效果，而<Table>本身是滚动容器<TableContainer>内部的普通子元素，会跟随内容同步滚动，绑定在它上面的外边框自然会跟着整体移动，才会出现对应异常表现：

• 滚动条在顶部时，Table顶边刚好对齐容器可视区顶部，露出顶部、左右侧边框
• 滚动过程中，Table顶边滚到可视区上方、底边未到可视区底部，仅左右侧边框处于可视范围内
• 滚动到底部时，Table底边对齐容器可视区底部，露出底部、左右侧边框

把外边框从可滚动的<Table>元素，转移到固定高度的滚动父容器<TableContainer>上即可。这个容器本身不会随内部内容滚动，能保证外边框始终固定在四周，不受滚动和吸顶表头影响。
具体操作步骤：

• 移除<Table>标签上的内联样式style={{ border: "1px solid black" }}
• 给设置了固定高度的<TableContainer>加上外边框样式
• 如果配置了内部单元格的分隔边框，注意调整单元格边距避免和外边框重叠出现双边框即可

修复后的核心代码参考：

{/* 外边框加在固定高度的滚动容器上 */}
<TableContainer style={{ height: 400, border: "1px solid black" }}>
  <Table stickyHeader>
    <TableHead>
      <TableRow>
        {users?.map((column) => (
          <TableCell key={column} role="columnheader">
            <Typography variant="h6">{column}</Typography>
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
    <TableBody>
      {users?.map((dataRow) => (
        <TableRow key={dataRow.id} title="tableRow">
          <TableCell classes={{ root: classes.tableCell }}>
            {dataRow.id || "--"}
          </TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
</TableContainer>

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