如何使用 Material UI 在 React 中並排顯示 2 個表格？

Question

目前看起來像

我想使用 Material UI 在 React 中並排放置 2 個表。

這是桌子。

function BasicTable() {
return (
  <TableContainer component={Paper}>
    <Table sx={{ minWidth: 300 }} aria-label="simple table">
      <TableHead>
        <TableRow>
          <TableCell>Dessert (100g serving)</TableCell>
          <TableCell align="right">Calories</TableCell>
          <TableCell align="right">Fat&nbsp;(g)</TableCell>
          <TableCell align="right">Carbs&nbsp;(g)</TableCell>
          <TableCell align="right">Protein&nbsp;(g)</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {rows.map((row) => (
          <TableRow
            key={row.name}
            sx={{ '&:last-child td, &:last-child th': { border: 0} }}
          >
            <TableCell component="th" scope="row">
              {row.name}
            </TableCell>
            <TableCell align="right">{row.calories}</TableCell>
            <TableCell align="right">{row.fat}</TableCell>
            <TableCell align="right">{row.carbs}</TableCell>
            <TableCell align="right">{row.protein}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>
);

}

這是我並排顯示表格兩次的代碼。

  <Box
    sx={{ 
    
    float:'left',
    clear: 'both',
    p:10,
    m:5, 
    bgcolor: 'background.paper', 
    borderRadius: 1,
   display: 'inline-flex', 
   direction:'row' }}>
   <BasicTable/>
    </Box>


    <Box
    sx={{ 
    float: 'right',
    clear: 'both',
    width:'200',
    //display: table,
    p:10,
    m:5, 
    bgcolor: 'background.paper', 
    borderRadius: 1,
   display: 'inline-block',
   direction:'row'
  // width:'50%' 
}}
    
    >
    <BasicTable/>
    </Box>
   

我只能做到這一點。 目前看起來像

我是 Material UI 的新手，不使用 CSS 文件很難格式化。 任何幫助，將不勝感激。 謝謝。

Answer 1

您可以使用Grid而不是 Box。

<Grid container spacing={2}>
  <Grid item sm={6}>
   <BasicTable/>
  </Grid>
 <Grid item sm={6}>
   <BasicTable/>
 </Grid>
</Grid>

Answer 2

您也可以使用Stack ：

<Stack direction='row'>
   <BasicTable />
   <BasicTable />
</Stack>