如何在可滚动表格中正确放置边框

Question

我有一个固定高度的粘性标题表，要查看表中的更多行，我们需要使用滚动来访问它们。

表格设计在表格上显示边框。

问题是当有更多行时，边框会随着滚动而移动。 在页面的开头，表格在表格的标题和侧面的顶部有一个边框，当您滚动时，边框只存在于侧面。 当您到达表格的尽头时，边框出现在表格的两侧和底部。

可接受的设计：无论卷轴如何，桌子的所有侧面都应始终有边框。

<TableContainer>
            <Table
              stickyHeader
              style={{ border: "1px solid black" }}
            >
              <TableHead>
                <TableRow>
                  {users &&
                    users.map((column) => (
                      <TableCell
                        key={column}
                        role="columnheader"
                      >
                        <Typography variant="h6">{column}</Typography>
                      </TableCell>
                    ))}
                </TableRow>
              </TableHead>
              <TableBody>
                {users &&
                  users.map((dataRow) => (
                    <TableRow
                      key={dataRow.id}
                      title="tableRow"
                    >
                      <TableCell classes={{ root: classes.tableCell }}>
                        {dataRow.id || "--"}
                      </TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>

Answer 1

通过将样式添加到 TableContainer 而不是 Table 来修复它。

style={{ border: "1px solid black" }}