如何让Material UI可折叠表格的展开行数据与主表列对齐？

核心实现思路 #

让展开行的单元格结构与主表列完全匹配，通过对应位置的TableCell组件，将子数据精准对应到主表的列位置，同时统一样式保证视觉对齐。

具体步骤及代码修改 #

1. 匹配主表列结构 #

展开行中创建与主表数量完全一致的TableCell，每个单元格对应主表的一列，空列留空占位。以你的示例表（含Name、Calories、Fat、Carbs、Protein列）为例，修改展开行代码：

<Collapse in={open} timeout="auto" unmountOnExit>
  <Box sx={{ margin: 1 }}>
    <Table size="small" aria-label="purchases">
      <TableBody>
        <TableRow>
          {/* 对应主表的展开图标列，留空占位 */}
          <TableCell padding="checkbox" />
          {/* 对应主表Name列，可放置子数据名称 */}
          <TableCell component="th" scope="row">
            子项名称
          </TableCell>
          {/* 对应主表Calories列 */}
          <TableCell align="right">150</TableCell>
          {/* 对应主表Fat列 */}
          <TableCell align="right">4.0</TableCell>
          {/* 对应主表Carbs列 */}
          <TableCell align="right">35</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </Box>
</Collapse>

2. 统一样式对齐 #

确保展开行的TableCell与主表单元格样式一致：

• 复用主表的padding属性（比如padding="checkbox"）
• 对齐方式（align属性）和主表对应列保持同步（数值类列统一用align="right"）
• 若主表有自定义内边距、字体样式，通过sx属性同步到展开行单元格：

<TableCell sx={{ padding: theme.spacing(1.5), fontSize: '0.875rem' }} align="right">
  子数据内容
</TableCell>

3. 固定图标列宽度（可选） #

如果主表展开图标列宽度不稳定，可给其设置固定宽度，避免展开行错位：

// 主表图标列
<TableCell padding="checkbox" sx={{ width: 50 }}>
  <IconButton onClick={handleClick}>
    {open ? <ExpandLess /> : <ExpandMore />}
  </IconButton>
</TableCell>
// 展开行对应占位列
<TableCell padding="checkbox" sx={{ width: 50 }} />

关键注意事项 #

• 展开行的TableCell数量必须和主表列数完全一致，包含隐藏列（若有）
• 对齐方式、内边距等样式细节要和主表单元格严格匹配
• 若主表列有动态增减逻辑，需同步更新展开行的单元格数量

内容的提问来源于stack exchange，提问作者programmers_view