如何在Material UI Paper组件中居中固定尺寸的表格

我来帮你搞定这个表格居中的问题～你现在的问题主要出在Paper组件的宽度设置上，咱们一步步调整：

问题分析 #

你给paper类设置了width: "100%"，这会让Paper占满整个父容器的宽度，此时margin: "auto"根本没法让它居中。另外，就算Paper宽度合适，表格在Paper内部也需要额外的样式来实现居中对齐。

修改方案 #

我们需要做两个关键调整：

• 让Paper不再占满100%宽度，而是根据表格的尺寸自适应，同时保留上下间距
• 确保表格在Paper内部水平居中

下面是修改后的完整代码，我标注了关键改动的地方：

import rows from "./mockdata/mock_dashboard";
const rowsData = rows;
const useStyles = makeStyles(theme => ({
  root: { width: "100%" },
  paper: { 
    marginTop: theme.spacing(3), 
    // 改动1：去掉width:100%，改用maxWidth和fit-content让Paper自适应表格宽度
    maxWidth: "1200px", // 和表格的maxWidth保持一致
    width: "fit-content",
    overflowX: "auto", 
    marginBottom: theme.spacing(2), 
    margin: "0 auto", // 上下间距保留，左右auto实现居中
    padding: theme.spacing(1) // 可选：给Paper加内边距，避免表格贴边
  },
  table: { 
    minWidth: 650, 
    maxWidth: 1200,
    // 改动2：让表格在Paper内居中
    margin: "0 auto" 
  }
}));
export default function MainDashboard() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <Table className={classes.table} size="small">
          <TableHead>
            <TableRow>
              <TableCell>Nz.</TableCell>
              <TableCell>Data Przyjęcia</TableCell>
              <TableCell>Koordynator</TableCell>
              <TableCell>Link do Pliku</TableCell>
              <TableCell>Dod. opis</TableCell>
              <TableCell>Data Wykonania</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rowsData.map(row => (
              <TableRow key={row.orderNo}>
                <TableCell component="th" scope="row">
                  {row.orderNo}
                </TableCell>
                <TableCell align="center">{row.orderDate}</TableCell>
                <TableCell align="center">{row.coordinator}</TableCell>
                <TableCell align="center">{row.link}</TableCell>
                <TableCell align="center" className={classes.descriptionFont}>
                  {row.description}
                </TableCell>
                <TableCell align="center">{row.dueDate}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Paper>
    </div>
  );
}

额外说明 #

• width: "fit-content"会让Paper的宽度刚好包裹住表格，同时maxWidth: 1200px确保它不会超过你设定的表格最大宽度
• 给表格加margin: "0 auto"是为了在Paper内部也保持居中，避免表格因为内容不足左对齐
• 可选的padding是让表格和Paper边框之间有留白，视觉效果更好

这样调整后，你的表格就能在页面中间（Paper内）完美居中啦～

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