如何防止Material UI可折叠表格展开时位置上移？

问题分析 #

展开折叠行时表格整体上移，核心原因是内容扩展触发页面布局重排，同时默认折叠动画未明确限定展开方向，加上代码中列合并数量与实际列数不匹配，进一步加剧了布局错乱。

修复方案 #

1. 修正列合并数量

将折叠行的TableCell的colspan值从6改为2（与表格实际列数一致），避免布局异常。

2. 固定表格容器高度并启用内部滚动

给TableContainer设置固定高度和垂直滚动，确保展开内容时仅容器内部滚动，表格整体位置保持不变。

3. 明确折叠组件的展开原点

给Collapse组件设置transformOrigin，确保内容从顶部向下展开，消除动画导致的视觉偏移。

修改后的完整代码 #

import * as React from 'react';
import Box from '@mui/material/Box';
import Collapse from '@mui/material/Collapse';
import IconButton from '@mui/material/IconButton';
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 Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';

function Row() {
  const [open, setOpen] = React.useState(false);

  return (
    <React.Fragment>
      <TableRow>
        <TableCell>
          <IconButton
            aria-label="expand row"
            size="small"
            onClick={() => setOpen(!open)}
          >
            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
          </IconButton>
        </TableCell>
        <TableCell component="th" scope="row">
          Yogurt
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={2}>
          <Collapse 
            in={open} 
            timeout="auto" 
            unmountOnExit
            sx={{ transformOrigin: 'top center' }}
          >
            <Box sx={{ margin: 1 }}>
              <Typography variant="h6" gutterBottom component="div">
                History
              </Typography>
              <Table sx={{maxWidth:'25vw'}}>
              Lorem ipsum dolor sit amet, duo in alii inimicus praesent, sea te sonet maiorum maluisset. 
              Has ad quis oratio aliquando, stet facer consectetuer te eos. 
              Usu ne iusto everti, ea labore moderatius definitiones has, at vim everti diceret. 
              Quot quidam est cu, vim hinc ubique ad. Sea ex nobis clita deseruisse, impetus nusquam eam at, 
              in labitur neglegentur contentiones pri.
              </Table>
            </Box>
          </Collapse>
        </TableCell>
      </TableRow>
    </React.Fragment>
  );
}

export default function CollapsibleTable() {
  return (
    <Box >
      <TableContainer 
        component={Paper}
        sx={{ height: '70vh', overflowY: 'auto' }}
      >
        <Table aria-label="collapsible table">
          <TableHead>
            <TableRow>
              <TableCell />
              <TableCell>Dessert</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <Row />
          </TableBody>
        </Table>
      </TableContainer>
    </Box>
  );
}

额外说明 #

如果不需要固定容器高度，也可以通过给页面主体设置足够的最小高度，确保内容展开时页面底部延伸而非表格上移。但固定容器高度是最直接的解决方案，能保证表格位置完全稳定。

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