如何在Material UI Table中实现同一列共享两个表头单元格

实现你要的「4个表头、3列内容，最后两个表头共享同一列」的效果，有两种常见实现方案，根据你的表头排列需求选择即可：

方案1：单行表头，两个表头同列排列 #

核心逻辑是保持表头单元格总数和内容列数一致（均为3个），仅在第三列的表头单元格内部嵌套两个表头文本，通过MUI的布局组件控制两个表头的排列方式：

import { Table, TableHead, TableRow, TableCell, TableBody, Box, Typography, Divider } from '@mui/material';

const DemoTable = () => {
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>表头1</TableCell>
          <TableCell>表头2</TableCell>
          {/* 共享列的表头单元格，内部放两个表头 */}
          <TableCell>
            <Box sx={{ 
              display: 'flex', 
              gap: 2, 
              alignItems: 'center' 
              // 若要上下排列加下行：flexDirection: 'column', alignItems: 'flex-start'
            }}>
              <Typography variant="body2" fontWeight={600}>表头3</Typography>
              {/* 需分隔线可加下行 */}
              {/* <Divider orientation="vertical" flexItem /> */}
              <Typography variant="body2" fontWeight={600}>表头4</Typography>
            </Box>
          </TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>列1内容</TableCell>
          <TableCell>列2内容</TableCell>
          <TableCell>列3内容</TableCell>
        </TableRow>
        {/* 其余数据行结构同上 */}
      </TableBody>
    </Table>
  )
}

方案2：两行表头，两个表头分属两行共享下方列 #

如果你的两个表头是上下分层排列的，可通过原生rowSpan、colSpan属性实现：

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

const DemoTable = () => {
  return (
    <Table>
      <TableHead>
        {/* 第一行表头 */}
        <TableRow>
          <TableCell rowSpan={2}>表头1</TableCell>
          <TableCell rowSpan={2}>表头2</TableCell>
          <TableCell align="center">表头3</TableCell>
        </TableRow>
        {/* 第二行表头 */}
        <TableRow>
          <TableCell align="center">表头4</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>列1内容</TableCell>
          <TableCell>列2内容</TableCell>
          <TableCell>列3内容</TableCell>
        </TableRow>
        {/* 其余数据行结构同上 */}
      </TableBody>
    </Table>
  )
}

如果需要调整表头的对齐方式、间距，直接修改对应组件的sx属性即可。

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