My table has a sticky header with a fixed height, and in order to see more rows in the table, we have to scroll through them.
The table design includes borders.
The problem arises when there are more rows, as the border moves with the scroll. Initially, the table has borders on the top of the headers and the sides, but as you scroll, the border is only visible on the sides. When you reach the end of the table, the border appears on the sides and the bottom of the table.
Desired Design: The table should always have borders on all sides, regardless of scrolling.
<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>