将 table 拆分成多个部分？

Question

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

目前我有一个 MUItable，但是有两个问题。一个，我不知道如何将最前面的 3 个 headers 变成 table 的一部分，我可以手动定位它们，但是如果你调整屏幕大小他们将从 table 内容中移出位置。两个，我怎么能把一个table分段成这样？要让 table headers 合理地留在部分中？

这一天的工作令人沮丧，当我设计它时感觉就像一个正常的 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>
    );
}

Answer 1

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

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

对于问题 Two，这只是一个样式问题，您可以通过为您要创建的单元格定义 borderRight 来“分割”table我想表示为“部分”的结尾。

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

这是个有趣的问题！

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

将 table 拆分成多个部分？

Splitting a table up into sections?

html

css

html-table

material-ui