MUI TableHead无法占满宽度，如何去除周围留白？

问题说明 #

使用MUI的Table组件时，TableHead未能占满容器宽度，四周存在一圈留白。简化代码示例如下：

return (
  <Table>
    <TableHead>
      <TableCell></TableCell>
      <TableCell>Name</TableCell>
      <TableCell>Date</TableCell>
      <TableCell>Status</TableCell>
      <TableCell>Actions</TableCell>
    </TableHead>
  </Table>
);

效果表现为表格头部与容器边缘之间存在明显空隙。

解决方案 #

方案1：用TableContainer包裹并移除内边距 #

MUI的Table组件默认带有16px的内边距，同时官方推荐使用TableContainer包裹Table以优化容器适配。修改代码如下：

import TableContainer from '@mui/material/TableContainer';

return (
  <TableContainer sx={{ padding: 0 }}>
    <Table sx={{ padding: 0 }}>
      <TableHead>
        <TableCell></TableCell>
        <TableCell>Name</TableCell>
        <TableCell>Date</TableCell>
        <TableCell>Status</TableCell>
        <TableCell>Actions</TableCell>
      </TableHead>
    </Table>
  </TableContainer>
);

方案2：直接移除Table的默认内边距 #

如果不需要TableContainer，可直接通过sx属性覆盖Table的默认padding样式：

return (
  <Table sx={{ padding: 0 }}>
    <TableHead>
      <TableCell></TableCell>
      <TableCell>Name</TableCell>
      <TableCell>Date</TableCell>
      <TableCell>Status</TableCell>
      <TableCell>Actions</TableCell>
    </TableHead>
  </Table>
);

额外调整：消除TableCell的内边距（可选） #

若TableCell自身的内边距也造成视觉留白，可单独调整TableCell样式：

<TableCell sx={{ padding: 0 }}></TableCell>

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