React Material UI如何实现表格表头多行多列嵌套效果

需求说明 #

需要实现三层嵌套表头：

• 顶级表头为Economics
• 其下包含3个二级子列：1st、2nd、AVG
• 每个二级子列下再包含2个三级末级列
  目标效果如下：
  

错误写法与异常表现 #

原有实现将所有层级的表头单元格嵌套在同一个<TableRow>内部，代码如下：

<Table sx={{ minWidth: 700 }} aria-label="customized table">
  <TableHead>
    <TableRow>
      <StyledTableCell align="left" scope="col">
        Economics
        <StyledTableCell align="left" scope="col">
          1st
          <StyledTableCell align="left">CQ</StyledTableCell>
          <StyledTableCell align="left">MCQ</StyledTableCell>
        </StyledTableCell>
        <StyledTableCell align="left">
          2nd
          <StyledTableCell align="left">CQ</StyledTableCell>
          <StyledTableCell align="left">MCQ</StyledTableCell>
        </StyledTableCell>
        <StyledTableCell align="left">
          AVG
          <StyledTableCell align="left">%</StyledTableCell>
          <StyledTableCell align="left">GP</StyledTableCell>
        </StyledTableCell>
      </StyledTableCell>
    </TableRow>
  </TableHead>

渲染后出现单元格尺寸过大、排版完全错位的问题，即使给单元格添加scope="col"属性也没有改善，异常效果如下：

错误原因 #

核心问题是完全不符合HTML表格多级表头的语法规则：

• 不同层级的表头不能直接嵌套写在同一个<TableCell>内部，每一层表头必须放在独立的<TableRow>中
• 跨越多列的上级表头必须添加colSpan属性，显式声明自己占据的列数，浏览器默认单元格只占1列，必然导致布局错乱
• scope属性仅做语义化标记，用于屏幕阅读器识别表头关联关系，不参与布局计算，无法解决排版问题

正确实现方案 #

按照层级拆分TableRow，给跨列表头添加对应colSpan值即可，三层表头对应三个独立的TableRow：

<Table sx={{ minWidth: 700 }} aria-label="customized table">
  <TableHead>
    {/* 第一层：顶级表头 共占6列宽度 */}
    <TableRow>
      <StyledTableCell align="left" colSpan={6}>Economics</StyledTableCell>
    </TableRow>
    {/* 第二层：二级表头 每个占2列宽度 */}
    <TableRow>
      <StyledTableCell align="left" colSpan={2}>1st</StyledTableCell>
      <StyledTableCell align="left" colSpan={2}>2nd</StyledTableCell>
      <StyledTableCell align="left" colSpan={2}>AVG</StyledTableCell>
    </TableRow>
    {/* 第三层：三级末级表头 每个占1列 共6列 */}
    <TableRow>
      <StyledTableCell align="left">CQ</StyledTableCell>
      <StyledTableCell align="left">MCQ</StyledTableCell>
      <StyledTableCell align="left">CQ</StyledTableCell>
      <StyledTableCell align="left">MCQ</StyledTableCell>
      <StyledTableCell align="left">%</StyledTableCell>
      <StyledTableCell align="left">GP</StyledTableCell>
    </TableRow>
  </TableHead>
  {/* 后续TableBody中每一行的单元格数量需要和最末级表头列数一致，即每行6个单元格 */}
</Table>

补充注意点：

• 如果需要实现跨行固定的表头，使用rowSpan属性声明占据的行数即可
• 多级表头的总列数从最末级开始计算，上级表头的colSpan总和必须等于下一层级的总列数，否则仍会出现错位

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