如何让Material React Table响应式且避免整体水平滚动？

核心问题分析 #

你当前代码给muiTableContainerProps设置了固定宽度1245px，直接限制了表格的自适应能力；同时表格布局模式与容器约束的组合不当，导致页面整体出现水平滚动而非表格内部区域滚动。

修复步骤及修改后代码 #

以下是调整后的完整代码，关键修改点已标注：

<div
  style={{
    marginTop: "20px",
    overflowX: "auto",
    width: "100%", // 确保父容器占满可用宽度，避免溢出页面
    maxWidth: "100%" // 额外保障容器不超出视口
  }}
>
  <MaterialReactTable
    displayColumnDefOptions={{
      "mrt-row-actions": {
        muiTableHeadCellProps: {
          align: "center",
        },
        size: 120,
      },
    }}
    columns={columns.map(col => ({
      ...col,
      minWidth: col.minWidth || 120, // 给列设置最小宽度，防止过度挤压
    }))}
    data={tableData}
    enableStickyHeader
    enableStickyFooter
    // 关键修改1：移除固定宽度，让容器自适应父元素，仅保留maxHeight
    muiTableContainerProps={{ sx: { maxHeight: "450px", width: "100%" } }}
    editingMode="modal"
    enableColumnOrdering
    renderTopToolbarCustomActions={({ table }) => (
      <Box
        sx={{
          display: "flex",
          gap: "1rem",
          p: "0.5rem",
          flexWrap: "wrap",
        }}
      >
        <Button
          color="primary"
          onClick={handleExportData}
          startIcon={<FileDownloadOutlined />}
          variant="contained"
        >
          Export All Data
        </Button>
        <Button
          disabled={table.getPrePaginationRowModel().rows.length === 0}
          onClick={() =>
            handleExportRows(table.getPrePaginationRowModel().rows)
          }
          startIcon={<FileDownloadOutlined />}
          variant="contained"
        >
          Export All Rows
        </Button>
        <Button
          disabled={table.getRowModel().rows.length === 0}
          onClick={() => handleExportRows(table.getRowModel().rows)}
          startIcon={<FileDownloadOutlined />}
          variant="contained"
        >
          Export Page Rows
        </Button>
        <Button
          color="error"
          onClick={downloadPdf}
          startIcon={<PrintOutlined />}
          variant="contained"
        >
          Print as PDF
        </Button>
      </Box>
    )}
    // 关键修改2：切换表格布局为fixed，控制列宽不撑开容器
    options={{
      tableLayout: "fixed",
    }}
  />
</div>

关键修改说明 #

• 移除固定宽度：将muiTableContainerProps中的固定宽度1245px替换为width: "100%"，让表格容器完全适配父div的宽度。
• 调整表格布局模式：把tableLayout从auto改为fixed，这种模式下表格总宽度由容器控制，列宽度不会因内容过长无限制撑开，确保仅表格内部出现水平滚动。
• 父容器约束：给父div添加width: "100%"和maxWidth: "100%"，确保它不会超出视口或父元素边界，避免页面整体滚动。
• 列宽优化：给每个列设置minWidth，防止列被过度挤压导致内容显示异常，提升小屏设备的可读性。

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