如何使用材料UI并排显示2个表格？

Question

当前看起来像

我想使用材料UI并排有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>
   

我只能实现这一目标

。而且它很难在不使用CSS文件的情况下格式化。任何帮助将不胜感激。谢谢。

Answer 1

您可以使用网格而不是框。

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