html - 将表格分成几个部分？

Question

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

目前我有一个 MUI 表，但有两个问题。 一个，我不知道如何使最上面的 3 个标题成为表格的一部分，我可以手动定位它们，但如果您调整屏幕大小，它们将从表格内容中移出位置。 两个，我怎么能像这样对表格进行分区？要让表格标题在部分中左对齐？

做这件事真是令人沮丧的一天，当我设计这个感觉就像一个普通的表格设计时，但我不知道怎么分成三部分。

这是我当前的代码:

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>
    );
}

Answer 1

对于问题One，您不需要在表格本身之外创建标题——您只需添加另一个TableRow。此外，TableCell 接受属性 colspan，它允许您定义希望每个单元格占据的列数。

<TableCell colspan={5}>
  ...
</TableCell>

对于问题二，这只是一个样式问题，您可以通过为要表示为“部分”的结尾。

我使用您的代码和您的 figma 布局准备了一个快速而简单的示例。你会想要清理它很多，但这应该让你朝着正确的方向前进。

这是一个有趣的问题!

工作代码沙箱:https://codesandbox.io/s/sectioned-table-with-top-header-63qb4?file=/demo.js