我目前正在为个人项目使用Material UI，但我认为这是一个关于表格的更一般的问题。我有一个我做的figma布局，我认为看起来不错，但我不太确定如何实现它。

目前我有一个MUI表，但有两个问题。一个，我不知道如何使最顶端的3个标题的一部分表，我可以手动定位他们，但如果你调整屏幕大小，他们将移动的位置从表的内容。2，我怎么能把一张table分成这样？要在节中左对齐表格标题？
这是一个令人沮丧的一天工作，而我正在设计这个感觉像一个正常的表设计，但我不知道如何地狱节成三个部分。

以下是我的当前代码：

import { styled } from "@mui/material/styles";
import Grid from "@mui/material/Grid";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";

function createData(name, calories, fat, carbs, protein) {
    return { name, calories, fat, carbs, protein };
}

const rows = [
    createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
    createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
    createData("Eclair", 262, 16.0, 24, 6.0),
    createData("Cupcake", 305, 3.7, 67, 4.3),
    createData("Gingerbread", 356, 16.0, 49, 3.9),
];

const StyledTableRow = styled(TableRow)(({ theme }) => ({
    "&:nth-of-type(odd)": {
        backgroundColor: theme.palette.action.hover,
    },
    // hide last border
    "&:last-child td, &:last-child th": {
        border: 0,
    },
}));

export default function DenseTable() {
    return (
        <Box sx={{ mt: 3 }}>
            <Grid container>
                <Grid item xs>
                    <Typography sx={{ fontSize: 16 }} component="h2">
                        <b>Header 1</b>
                    </Typography>
                </Grid>
                <Grid item xs>
                    <Typography sx={{ fontSize: 16 }} component="h2">
                        <b>header 2</b>
                    </Typography>
                </Grid>
                <Grid item xs>
                    <Typography sx={{ fontSize: 16 }} component="h2">
                        <b>Header 3</b>
                    </Typography>
                </Grid>
            </Grid>
            {/*  */}
            <TableContainer component={Paper}>
                <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
                    <TableHead>
                        <TableRow>
                            <TableCell>header 1</TableCell>
                            <TableCell>header 2</TableCell>
                            <TableCell>header 3 </TableCell>
                            <TableCell>header 4</TableCell>
                            <TableCell>header 5</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {rows.map((row) => (
                            <StyledTableRow
                                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>
                            </StyledTableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
        </Box>
    );
}