[FIXED] How to place the border correctly in the scrollable table

Issue

I have a sticky header table with fixed height, to view more rows in the table, we need o access them using scroll.

The table design shows border on the table.

The issue is when there are more rows the border moves with the scroll. In the start of the page, the table has a border on the top of the headers and sides of the table, when you scroll the border is only present on the sides. When you reach the end of the table, the border is present on the sides and the bottom of the table.

Accepted Design : The table should have a border on all its sides at all times, irrespective of the scroll.

<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>

Solution

Fixed it by adding the style to TableContainer instead of Table.

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

Answered By - Tanu

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)