I am not able to extend the divider to the full length of the page.

<TableRow>
      <TableCell className={classes.tableCell} colSpan={6}>
        <Box
          display="grid"
          gridTemplateColumns="12% 12% 12% 12% 12%"
          gridRow="1"
        >
          <Box textAlign="left" gridColumn="1">
            <p>One</p>
          </Box>
          <Box textAlign="left" gridColumn="2">
            <p>Two</p>
          </Box>
          <Box textAlign="left" gridColumn="3">
            <p>3</p>
          </Box>
          <Box textAlign="left" gridColumn="4">
            <p>4</p>
          </Box>
        </Box>
        <Divider variant="fullWidth" style={{ width: "110%" }} />
        <Box padding={1}>
          <TableContainer>
            <Table stickyHeader>
              <TableHead>
                <TableRow>
                  
                </TableRow>
              </TableHead>
          </TableContainer>
        </Box>
      </TableCell>
    </TableRow>

This is how it looks.

CodePudding user response：

Try setting the width to 100vw instead of 110%.

CodePudding user response：

Changing the colSpan to 8 fixed the issue for me.