使用Material UI实现单行内最后td跨7列数据表格的疑问

这种布局完全可以在单一行内实现，不需要拆分两个独立的行，借助表格原生的跨列属性即可实现需求。

Material UI 的 TableCell 组件原生支持 HTML 标准的跨列属性，你需要的 8 列布局结构非常简单：每一行内仅需声明 2 个 TableCell 即可，第一个单元格默认占 1 列，第二个单元格设置 colSpan={7} 跨 7 列，总占列数刚好为 8，完全匹配你的要求。

代码示例 #

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

function CustomTable() {
  return (
    <Paper>
      <Table>
        <TableBody>
          {/* 每行结构统一 */}
          <TableRow>
            <TableCell>行1第一列内容</TableCell>
            <TableCell colSpan={7}>行1跨7列的展示内容</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>行2第一列内容</TableCell>
            <TableCell colSpan={7}>行2跨7列的展示内容</TableCell>
          </TableRow>
          {/* 更多行按照相同结构添加即可 */}
        </TableBody>
      </Table>
    </Paper>
  );
}

注意事项 #

• 需确保表格所有行的总占列数统一为8，避免出现列宽错位的问题
• 如果表格配置了表头，表头的总列数也需要和表体对齐，可根据设计需求调整表头的跨列逻辑

预期效果参考 #

内容的提问来源于stack exchange，提问作者K.Kröger