Material-UI Table表头仅与第一列对齐 如何实现表头与对应列正确匹配

问题原因 #

你的表头单元格数量和表体每行的单元格数量不匹配：你当前只定义了5个业务字段的表头，但表体每行还有EDIT、DELETE两个操作列，总共7个单元格，数量不一致是对齐错位的核心原因。
从你贴出的渲染后HTML也能看到，浏览器自动在表头末尾补了两个无自定义样式的<th>来匹配表体列数，结构和样式不统一进一步加重了错位问题。

修复方案 #

直接在表头末尾补充两个对应操作列的表头单元格即可，修改后的表头代码示例：

<TableHead>
  <TableRow className="Table-Headers">
    <TableHeader name="Name" />
    <TableHeader name="Type" />
    <TableHeader name="Size" />
    <TableHeader name="HP" />
    <TableHeader name="CR" />
    {/* 补充两个操作列的表头，可根据需求自定义内容 */}
    <TableCell className="Table-Headers"></TableCell>
    <TableCell className="Table-Headers"></TableCell>
  </TableRow>
</TableHead>

如果你需要给操作列加表头文字，可以对应修改补充的单元格内容，比如：

<TableCell className="Table-Headers"><strong>编辑</strong></TableCell>
<TableCell className="Table-Headers"><strong>删除</strong></TableCell>

扩展说明 #

HTML原生表格要求每行的单元格数量必须一致，若有合并单元格需求需要搭配colSpan/rowSpan属性声明列宽/行宽占比，否则就会出现自动错位对齐的问题。

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