MUI表格结合Collapse组件展开行时单元格被挤压至单个单元格，如何实现与父表格对齐？

你遇到的这个问题其实是因为Collapse组件的默认渲染结构会干扰MUI Table的布局规则——TableBody的直接子元素必须是TableRow，而你把Collapse直接放在TableBody里，它会把里面的TableRow包裹起来，导致表格的列布局逻辑失效，所以展开后的单元格会被挤到一起。

下面给你两种可靠的解决方案：

方案一：用跨行单元格+嵌套表格实现完美对齐 #

这种方法是把Collapse放在一个占满整行的TableCell里，然后在里面嵌套一个和原表格列数一致的小表格，这样展开的内容就能自然对齐原表格的列宽，是最稳妥的实现方式。

修改后的代码示例：

import { useState } from 'react';
import { Table, TableHead, TableRow, TableCell, TableBody, Collapse } from '@mui/material';

export default function App() {
  const [expanded, setExpanded] = useState(false);
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell />
          <TableCell>Header 1</TableCell>
          <TableCell>Header 2</TableCell>
          <TableCell>Header 3</TableCell>
          <TableCell>Header 4</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell onClick={() => setExpanded(!expanded)}>Expand</TableCell>
          <TableCell>A</TableCell>
          <TableCell>B</TableCell>
          <TableCell>C</TableCell>
          <TableCell>D</TableCell>
        </TableRow>
        <TableRow>
          {/* 用colspan让单元格占满所有列（这里对应原表格的5列） */}
          <TableCell colSpan={5}>
            <Collapse in={expanded} timeout="auto" unmountOnExit>
              {/* 嵌套小型Table，继承原表格的列宽规则 */}
              <Table size="small" aria-label="expanded row">
                <TableBody>
                  <TableRow>
                    <TableCell />
                    <TableCell>E</TableCell>
                    <TableCell>F</TableCell>
                    <TableCell>G</TableCell>
                    <TableCell>H</TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </Collapse>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
};

关键改动说明： #

• 新增了一个TableRow，里面的TableCell通过colSpan={5}占满整行，确保折叠内容不会被限制在单个单元格
• 在Collapse内部嵌套小型Table，让里面的TableRow和TableCell自动匹配原表格的列宽
• 使用size="small"可以让折叠行的视觉风格和原表格更协调，你也可以根据需求调整这个属性

方案二：修改Collapse样式适配表格布局 #

如果你不想用嵌套表格，也可以通过自定义CSS样式让Collapse的渲染结构符合Table的布局要求：

import { useState } from 'react';
import { Table, TableHead, TableRow, TableCell, TableBody, Collapse } from '@mui/material';

// 定义适配表格的Collapse样式
const collapseStyle = {
  display: 'table-row-group',
  width: '100%',
};

export default function App() {
  const [expanded, setExpanded] = useState(false);
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell />
          <TableCell>Header 1</TableCell>
          <TableCell>Header 2</TableCell>
          <TableCell>Header 3</TableCell>
          <TableCell>Header 4</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell onClick={() => setExpanded(!expanded)}>Expand</TableCell>
          <TableCell>A</TableCell>
          <TableCell>B</TableCell>
          <TableCell>C</TableCell>
          <TableCell>D</TableCell>
        </TableRow>
        <Collapse 
          in={expanded} 
          timeout="auto" 
          unmountOnExit
          sx={collapseStyle} // 应用自定义样式
        >
          <TableRow>
            <TableCell />
            <TableCell>E</TableCell>
            <TableCell>F</TableCell>
            <TableCell>G</TableCell>
            <TableCell>H</TableCell>
          </TableRow>
        </Collapse>
      </TableBody>
    </Table>
  );
};

这种方法通过设置display: table-row-group，让Collapse的表现和TableBody的子元素一致，从而不破坏表格的布局逻辑。不过这种方式在一些复杂表格场景下可能出现兼容性问题，所以更推荐第一种嵌套表格的方案。

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