如何在Material UI TableBody中让div占满100%宽度以居中显示CircularProgress

问题原因 #

HTML 的 table 元素有严格的嵌套规范，<tbody> 下的直接子元素只能是 <tr>（行元素），你直接放置 div 时，浏览器会自动补全 <tr><td> 结构将 div 包裹，因此你的外层容器只会占据第一列的宽度，无法铺满整行。

解决方案 #

按照表格规范调整嵌套结构，添加跨列的单元格承载加载组件：

1. 外层包裹 <TableRow> 和 <TableCell> 组件
2. 给 <TableCell> 设置 colSpan 属性，属性值等于你的表格总列数，让单元格可以横跨整个表格宽度
3. 居中样式可以直接写在单元格或者内部容器上

示例代码：

const styles = (theme) => ({
  progressWrapper: {
    width: "100%",
    display: "flex",
    justifyContent: "center",
    minHeight: "10vh",
    alignItems: "center"
  }
})

// 此处colSpan设为你的表格实际总列数即可，示例假设表格共有4列
<TableBody>
  <TableRow>
    <TableCell colSpan={4} className={classes.progressWrapper}>
      <CircularProgress />
    </TableCell>
  </TableRow>
</TableBody>

如果你使用的是 MUI v5 版本，只需将样式写法替换为 styled 或 sx 属性即可，结构逻辑完全一致。

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