css 无法添加边距权以响应多个表

u7up0aaq  于 2023-06-07  发布在  其他
关注(0)|答案(1)|浏览(76)

我想在一个多表的右边加上页边距。但是,它不起作用
下面是我的代码:

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

我用mr将sx添加到Table,但它不起作用。有谁知道如何添加保证金的多表?

ajsxfq5m

ajsxfq5m1#

默认情况下,<TableContainer /><Table />组件的宽度都设置为100%。如果您希望margin为任意一种,请将该元素的宽度设置为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>

相关问题