可以在一个表行中有两个数据行？ 我想让我的桌子看起来像这样： 我能够做到这一点，但是两行没有对齐。它们是一个又一个部分，而不是同一行。这是我的代码。部分是OBJ ...

Question

我能够做到这一点，但是两行不对。它们是一个又一个部分，而不是同一行。这是我的代码。部分是一个对象数组，每个0,1,2索引都有20行。我能够制作标题，但无法处理行。如果您需要更多信息，请让我知道。

     {sections.map((section, index) => (
                        <TableBody key={index}>
                            {section.map((row, rowIndex) => (
                                <TableRow
                                    key={rowIndex}
                                    sx={{
                                        '&:nth-of-type(odd)': {
                                            backgroundColor: 'zebra.odd',
                                        },
                                        'color': 'primary.main',
                                    }}
                                >
                                    {headers.map((header, i) => (
                                        <TableCell
                                            key={i}
                                            component='th'
                                            scope='col'
                                            align='left'
                                            sx={tableCellStyles}
                                        >
                                            <Typography
                                                sx={{
                                                    color: 'primary.main',
                                                    fontWeight: 400,
                                                    fontSize: 14,
                                                }}
                                            >
                                                {index === 0 && (row[header.toLowerCase()] ?? '')}
                                            </Typography>
                                        </TableCell>
                                    ))}
                                    {headers.map((header, i) => (
                                        <TableCell
                                            key={i}
                                            component='th'
                                            scope='row'
                                            align='left'
                                            sx={tableCellStyles}
                                        >
                                            <Typography
                                                sx={{
                                                    color: 'primary.main',
                                                    fontWeight: 400,
                                                    fontSize: 14,
                                                }}
                                            >
                                                {index === 1 && (row[header.toLowerCase()] ?? '')}
                                            </Typography>
                                        </TableCell>
                                    ))}
                                    {headers.map((header, i) => (
                                        <TableCell
                                            key={i}
                                            component='th'
                                            scope='col'
                                            align='left'
                                            sx={tableCellStyles}
                                        >
                                            <Typography
                                                sx={{
                                                    color: 'primary.main',
                                                    fontWeight: 400,
                                                    fontSize: 14,
                                                }}
                                            >
                                                {index === 2 && (row[header.toLowerCase()] ?? '')}
                                            </Typography>
                                        </TableCell>
                                    ))}
                                </TableRow>
                            ))}
                        </TableBody>
                    ))}

恢复：

您应该连续使用两个表，而不是使用一个表。代码应该像这样：

<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
    <Table>
        <TableBody>
        ...
        </TableBody>
    </Table>
    <Table>
        <TableBody>
        ...
        </TableBody>
    </Table>
</Box>

但是，如果您真的只需要一个表，则可以在[0、1、2]和[0，...，19]之类的数组上使用

Answer 1

<TableBody>
    {[...Array(20).keys()].map(rowIndex => (
        <TableRow
            key={rowIndex}
            sx={{
                '&:nth-of-type(odd)': { backgroundColor: 'zebra.odd' },
                color: 'primary.main',
            }}
        >
            {[...Array(3).keys()].map(sectionIndex => (
                headers.map((header, i) => (
                    <TableCell
                        key={i}
                        component="th"
                        scope={sectionIndex === 1 ? 'row' : 'col'}
                        align="left"
                        sx={tableCellStyles}
                    >
                        <Typography
                            sx={{
                                color: 'primary.main',
                                fontWeight: 400,
                                fontSize: 14,
                            }}
                        >
                            {sections[sectionIndex][rowIndex][header.toLowerCase()] ?? ''}
                        </Typography>
                    </TableCell>
                ))
            ))}
        </TableRow>
    ))}
</TableBody>

在上面的代码中，您将收到您想要的3个部分的表格。我没有更改您的

component

和

scope

属性，但我认为您使用了错误。