我有一個div，它有一個材質(zhì)反應表(不是材質(zhì)UI表)。我想讓它反應靈敏。我已經(jīng)嘗試了很多不同的方法，但由于某些原因，它不起作用。每當我嘗試一些東西時，整個表格都會水平滾動，而不僅僅是其中的列會水平滾動。我現(xiàn)在已經(jīng)將表格的寬度固定為1245像素，這將導致列進入水平滾動。

<div
        style={{
          marginTop: "20px",
          overflowX: "auto",
        }}
      >
        <MaterialReactTable
          displayColumnDefOptions={{
            "mrt-row-actions": {
              muiTableHeadCellProps: {
                align: "center",
              },
              size: 120,
            },
          }}
          columns={columns}
          data={tableData}
          enableStickyHeader
          enableStickyFooter
          muiTableContainerProps={{ sx: { maxHeight: "450px",width:"1245px"} }}
          editingMode="modal" //default
          enableColumnOrdering
          renderTopToolbarCustomActions={({ table }) => (
            <Box
              sx={{
                display: "flex",
                gap: "1rem",
                p: "0.5rem",
                flexWrap: "wrap",
              }}
            >
              <Button
                color="primary"
                //export all data that is currently in the table (ignore pagination, sorting, filtering, etc.)
                onClick={handleExportData}
                startIcon={<FileDownloadOutlined />}
                variant="contained"
              >
                Export All Data
              </Button>
              <Button
                disabled={table.getPrePaginationRowModel().rows.length === 0}
                //export all rows, including from the next page, (still respects filtering and sorting)
                onClick={() =>
                  handleExportRows(table.getPrePaginationRowModel().rows)
                }
                startIcon={<FileDownloadOutlined />}
                variant="contained"
              >
                Export All Rows
              </Button>
              <Button
                disabled={table.getRowModel().rows.length === 0}
                //export all rows as seen on the screen (respects pagination, sorting, filtering, etc.)
                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>
          )}
          options={{
            tableLayout: "auto",
          }}
        />
      </div>

我嘗試過使用flex，我嘗試過將div和表格的寬度設(shè)置為100%,還有一些其他的解決方案，但是都不起作用。