Material-UI v4 可折叠表格行与常规列对齐问题求助

核心解决思路 #

问题根源在于可折叠行的单元格未与表头列的数量、宽度、对齐方式保持同步，按以下方式修改即可实现对齐且缩放时保持一致：

1. 统一列宽度配置：为每个表头列定义固定比例或宽度，确保缩放时各列同步调整
2. 匹配单元格数量与对齐方式：可折叠行的单元格数量需与表头列数完全对应，对齐方式和表头保持一致
3. 启用表格自适应：给Table组件添加fullWidth属性，确保表格随容器缩放

代码修改示例 #

1. 定义列宽度配置

const columnWidths = {
  dessert: '20%',
  calories: '20%',
  fat: '20%',
  carbs: '20%',
  protein: '20%'
};

2. 表头列设置宽度与对齐

<TableHead>
  <TableRow>
    <TableCell style={{ width: columnWidths.dessert }}>Dessert</TableCell>
    <TableCell style={{ width: columnWidths.calories }} align="right">Calories</TableCell>
    <TableCell style={{ width: columnWidths.fat }} align="right">Fat</TableCell>
    <TableCell style={{ width: columnWidths.carbs }} align="right">Carbs</TableCell>
    <TableCell style={{ width: columnWidths.protein }} align="right">Protein</TableCell>
  </TableRow>
</TableHead>

3. 可折叠行匹配表头结构

如果折叠内容需要对应每列：

<TableRow>
  <TableCell style={{ width: columnWidths.dessert }}>
    Frozen Yogurt Details: Low-fat, creamy texture
  </TableCell>
  <TableCell style={{ width: columnWidths.calories }} align="right">-</TableCell>
  <TableCell style={{ width: columnWidths.fat }} align="right">-</TableCell>
  <TableCell style={{ width: columnWidths.carbs }} align="right">-</TableCell>
  <TableCell style={{ width: columnWidths.protein }} align="right">-</TableCell>
</TableRow>

如果折叠内容需跨所有列，需保持内部布局与表头列宽匹配：

<TableRow>
  <TableCell colSpan={5} style={{ width: '100%' }}>
    <div style={{ display: 'flex', width: '100%' }}>
      <span style={{ width: columnWidths.dessert }}>Frozen Yogurt Details</span>
      <span style={{ width: columnWidths.calories, textAlign: 'right' }}>Serving size: 1 cup</span>
      <span style={{ width: columnWidths.fat, textAlign: 'right' }}>--</span>
      <span style={{ width: columnWidths.carbs, textAlign: 'right' }}>--</span>
      <span style={{ width: columnWidths.protein, textAlign: 'right' }}>--</span>
    </div>
  </TableCell>
</TableRow>

4. 启用表格自适应

<Table fullWidth>
  {/* 表头与表格内容 */}
</Table>

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