Material UI table header style border bottom is not filled

[jaekunchoi]

I noticed header border bottom is not filled to the end when using Material UI's basic table

Is there a good way to fill this so it styles properly?

For example my code:

<TableContainer component={Paper}>
      <MuTable {...getTableProps()} className="striped highlight" style={{ tableLayout: "auto" }}>
        <TableHead style={{ background: grey[100] }}>
          {headerGroups.map((headerGroup, rowIndex) => (
            <TableRow key={rowIndex} {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map((column, columnIndex) => {
                  const style = {
                    textAlign: column.align ? column.align : 'left '
                  }

                  return (
                    <TableCell key={columnIndex} size="small"  {...column.getHeaderProps(column.getSortByToggleProps())}>
                        {column.canSort ? (
                          <TableSortLabel
                            active={column.isSorted}
                            direction={column.isSortedDesc ? 'desc' : 'asc'}
                            {...column.getSortByToggleProps()}
                            className={classes.tableSortLabel}
                            style={style}
                          >
                            {column.Tooltip ? 
                              <Tooltip title={column.Tooltip} placement="top"><Typography variant="subtitle2">{column.render('Header')}</Typography></Tooltip> : 
                              <Typography variant="subtitle2">{column.render('Header')}</Typography>
                            }
                          </TableSortLabel>
                        ) : (
                          <div style={style} className={classes.tableLabel}>
                            {column.Tooltip ? 
                              <Tooltip title={column.Tooltip} placement="top"><Typography variant="subtitle2">{column.render('Header')}</Typography></Tooltip> : 
                              <Typography variant="subtitle2">{column.render('Header')}</Typography>
                            }
                          </div>
                        )}
                    </TableCell>
                  )
                })}
            </TableRow>
          ))}
        </TableHead>
        <TableBody {...getTableBodyProps()}>
          <TableRow>
          ...

[yaleshen0]

Hi @jaekunchoi, were you able to figure out why and how to solve it?