picture of the problem
从图片上看，我不知道为什么布局是这样的。代码是从mui docs的可折叠表www.example.com中提取https://mui.com/material-ui/react-table/#collapsible-table，只是对数据做了一些修改。

<TableContainer component={Paper}>
            <Table aria-label="collapsible table" >
                <TableHead >
                    <TableRow >
                        <TableCell />
                        <TableCell >sid</TableCell>
                        <TableCell >vid</TableCell>
                        <TableCell >sensorname</TableCell>
                        <TableCell >name</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {rows.map((row) => (
                        <Row key={row.sid + row.vid} row={row} />
                    ))}
                </TableBody>
            </Table>
        </TableContainer>

export default function Row(props) {
const { row } = props;
const [open, setOpen] = React.useState(false);

return (
  <React.Fragment>
    <TableRow >
      <TableCell>
        <IconButton
          aria-label="expand row"
          size="small"
          onClick={() => setOpen(!open)}
        >
          {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
        </IconButton>
      </TableCell>
      <TableCell style={{textAlign:'left'}}>{row.sid}</TableCell>
      <TableCell style={{textAlign:'left'}}>{row.vid}</TableCell>
      <TableCell style={{textAlign:'left'}}>{row.sensorname}</TableCell>
      <TableCell style={{textAlign:'left'}}>{row.name}</TableCell>
    </TableRow>
    <TableRow>
      <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
        <Collapse in={open} timeout="auto" unmountOnExit>
          <Box sx={{ margin: 1 }}>
            <Typography variant="h6" gutterBottom component="div">
              Settings
            </Typography>
            <Table size="small" aria-label="purchases">
              <TableHead>
                <TableRow>
                  <TableCell>Date</TableCell>
                  <TableCell>Customer</TableCell>
                  <TableCell align="right">Amount</TableCell>
                  <TableCell align="right">Total price ($)</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {row.history.map((historyRow) => (
                  <TableRow key={historyRow.date}>
                    <TableCell component="th" scope="row">
                      {historyRow.date}
                    </TableCell>
                    <TableCell>{historyRow.customerId}</TableCell>
                    <TableCell align="right">{historyRow.amount}</TableCell>
                    <TableCell align="right">
                      {Math.round(historyRow.amount * 100) / 100}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </Box>
        </Collapse>
      </TableCell>
    </TableRow>
  </React.Fragment>
);

我试过使用css网格。

<Table style={{display: 'grid', gridTemplateColumns: 'repeat(autofit, minmax(100px, 1fr))'}} >

但这给了我一个不对齐的头和体。
picture of using css grid
我不知道发生了什么事，已经被困在这两天了。任何帮助都将不胜感激