MUI表格rowspan属性无效果，表头列垂直占满需求未实现

问题分析 #

你给Heading1对应的TableCell设置了rowSpan={3}，但calorie数据错误显示在Heading1列下方，核心原因是：表头定义了2列，但数据行每行仅渲染1个TableCell，浏览器会默认将这个单元格填充到第一列，与表头的跨行单元格冲突，导致布局错位。

解决方法 #

确保数据行的列结构与表头一致，在数据行的第一列位置添加空的TableCell占位，让calorie单元格对应到第二列：

修改后的完整代码：

import * as React from "react";
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 Paper from "@mui/material/Paper";

const rows = [
  {
    id: 1,
    calorie: 10
  },
  {
    id: 2,
    calorie: 20
  }
];

export default function BasicTable() {
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 300 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell rowSpan={3}>Heading1</TableCell>
            <TableCell>Heading2</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id}>
              <TableCell /> {/* 占位第一列，确保结构对齐 */}
              <TableCell>{row.calorie}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

补充说明 #

• rowSpan={3}的取值是正确的：表头1行 + 数据行2行，总共3行，跨行覆盖整列
• 若不想显示占位的空单元格，可添加样式隐藏：<TableCell sx={{ visibility: 'hidden' }} />，不影响布局结构

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