cannot add margin right to react mui table-CodePudding

I want to add margin to the right of a mui table. However, it doesn't work

Here's my code:

<TableContainer>
        <Table sx={{ mr: 100 }} aria-label="customized table">
          <TableHead>
            <TableRow>
              <StyledTableCell sx={{fontSize: 20, borderBottom: "1px solid #d9d9d6", borderTop: "1px solid #d9d9d6", borderLeft: "1px solid #d9d9d6", borderRight: "1px solid #d9d9d6"}}>RPC Name Response</StyledTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell sx={{borderBottom: "1px solid #d9d9d6", borderLeft: "1px solid #d9d9d6", borderRight: "1px solid #d9d9d6"}} className="response-container">
                <div className="response">{response}</div>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </TableContainer>

I added sx with mr to Table, but it doesn't work. Does anyone know how to add margin to mui table?

CodePudding user response：

Both the <TableContainer /> and <Table /> components have their width set to 100% by default. If you want margin to either, set the width of that element to auto.

<TableContainer sx={{ mr: '100px', width: 'auto' }}>
  <Table aria-label="customized table">
    <TableHead>
      <TableRow>
        <StyledTableCell
          sx={{
            fontSize: 20,
            borderBottom: '1px solid #d9d9d6',
            borderTop: '1px solid #d9d9d6',
            borderLeft: '1px solid #d9d9d6',
            borderRight: '1px solid #d9d9d6',
          }}
        >
          RPC Name Response
        </StyledTableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        <TableCell
          sx={{
            borderBottom: '1px solid #d9d9d6',
            borderLeft: '1px solid #d9d9d6',
            borderRight: '1px solid #d9d9d6',
          }}
          className="response-container"
        >
          <div className="response">{response}</div>
        </TableCell>
      </TableRow>
    </TableBody>
  </Table>
</TableContainer>