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

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

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

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