我自己也为此挣扎了一段时间，我通过将表的宽度设置为width={Object.keys(rows[0]).length*150}，并将每个列的最小宽度设置为150（或者无论你选择什么，只要确保它在你的表中是相同的）。
然后将其包在纸中，并给予宽度和溢出X：'auto'
就像这样：

const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);

export default function DataPreview(props) {

const rows =  [{ One: 'one', Two: 'Two',Three: 'Three',Four:'Four', Five:'Five', Six:'Six'}]

return (
    <Paper style={{ height: 400, width:700, overflowX: 'auto'}}>
        <VirtualizedTable

         width={Object.keys(rows[0]).length*150}
        
            rowCount={rows.length}
            rowGetter={({ index }) => rows[index]}
            
            columns={Object.keys(rows[0]).map(head=>{return(
                {
                    minWidth:150,
                    label:head,
                    dataKey:head
                }
            )})}
        />
    </Paper>
 );
}

字符串

react-virtualized Table docs的介绍段落（强调部分已添加）：
具有固定标题和窗口行的表组件，用于提高大型数据集的性能。此组件需要显式的width和height参数。Table内容可以垂直滚动，但不意味着水平滚动。
你也许可以破解它，但它不支持水平滚动，所以它可能不会工作。如果这是你的应用程序的要求，请考虑使用Grid或MultiGrid。

在bvaughn的公认答案的基础上，水平滚动表的破解可能看起来像this，但是，要注意这个破解带来的以下警告：

• 您溢出的Table列将不被虚拟化
• 滚动焦点被 Package 器的x轴滚动捕获，您需要在内部Table组件中单击以重新聚焦并重新获得y轴滚动。这是令人难以置信的令人沮丧的使用，特别是在移动的设备上。

我得到了这样的虚拟化水平滚动：

import {
  CSSProperties,
  MouseEvent,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react'
import List, {
  ListRowProps,
} from 'react-virtualized/dist/commonjs/List'
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'
import _ from 'lodash'
import { useSize } from '@termsurf/vine'
import cx from 'classnames'

export default function HexViewer({
  className,
  input,
  hoveredClassName,
  rightClassName,
}: {
  hoveredClassName?: string
  className?: string
  rightClassName?: string
  input?: ArrayBuffer
}) {
  const [buffer, setBuffer] = useState(input)
  const [hoveredPosition, setHoveredPosition] =
    useState<HexPositionCast>()
  const byteArray = useMemo(
    () => buffer && [...new Uint8Array(buffer)],
    [buffer],
  )
  const bodySizeRef = useRef(null)
  const bodySize = useSize(bodySizeRef)
  // const bodySizeRef = useRef(null)
  // const bodySize = useSize(bodySizeRef)

  useEffect(() => {
    setBuffer(input)
  }, [input])

  return (
    <div
      className={cx('relative horizontal-virtual-list', className)}
      ref={bodySizeRef}
    >
      <HexBody
        hoveredPosition={hoveredPosition}
        width={bodySize?.width ?? 128}
        height={bodySize?.height ? bodySize.height : window.innerHeight}
        list={byteArray}
        onHovered={setHoveredPosition}
        hoveredClassName={hoveredClassName}
        rightClassName={rightClassName}
      />
    </div>
  )
}

type HexPositionCast = {
  row: number
  column: number
}

function HexBody({
  width,
  height,
  list,
  onHovered,
  hoveredPosition,
  hoveredClassName,
  rightClassName,
}: {
  hoveredPosition?: HexPositionCast
  onHovered: (pos: HexPositionCast) => void
  width: number
  height: number
  list?: Array<number>
  hoveredClassName?: string
  rightClassName?: string
}) {
  const rows = useMemo(() => {
    const chunkArray = _.chunk(list, 16)

    return chunkArray.map((row, i) => ({
      left: i.toString(16).padStart(8, '0').toUpperCase(),
      middle: row.map(x =>
        x.toString(16).padStart(2, '0').toUpperCase(),
      ),
      right: row.map(x => String.fromCharCode(x)),
    }))
  }, [list])
  const rowCount = rows.length
  const rowRenderer = ({
    index,
    isScrolling,
    isVisible,
    key,
    style,
  }: {
    index: number
    isScrolling: boolean
    isVisible: boolean
    key: string
    style: CSSProperties
  }) => {
    const row = rows[index]

    return (
      <div
        className="relative flex pb-4 last:pb-0"
        style={style}
        key={key}
      >
        {/* <div className="relative pl-16 pr-8">{row.left}</div> */}
        <div className="relative flex gap-8 pl-8 pr-8">
          {row.middle.map((code, i) => (
            <span
              key={i}
              className={cx('relative inline-block')}
            >
              <span
                className={cx(
                  'rounded-sm',
                  hoveredPosition &&
                    hoveredPosition.row === index &&
                    hoveredPosition.column === i
                    ? hoveredClassName
                    : undefined,
                  'absolute -left-4 -right-4 top-0 bottom-0 pointer-events-none',
                )}
              />
              <span
                className="relative code cursor-default"
                data-i={index}
                data-j={i}
              >
                {code}
              </span>
            </span>
          ))}
        </div>
        <div className={cx(rightClassName, 'relative pl-8 pr-16 flex')}>
          {row.right.map((text, i) => (
            <span
              key={i}
              className={cx('relative inline-block w-16 text-center')}
            >
              <span
                className={cx(
                  'rounded-sm',
                  hoveredPosition &&
                    hoveredPosition.row === index &&
                    hoveredPosition.column === i
                    ? hoveredClassName
                    : undefined,
                  'absolute -left-4 -right-4 top-0 bottom-0 pointer-events-none',
                )}
              />
              <span
                className="relative code cursor-default"
                data-i={index}
                data-j={i}
              >
                {text}
              </span>
            </span>
          ))}
        </div>
      </div>
    )
  }

  if (!rowCount) {
    return null
  }

  return (
    <List
      autoContainerWidth
      height={height}
      overscanRowCount={10}
      rowCount={rowCount}
      rowHeight={32}
      rowRenderer={rowRenderer}
      // scrollToIndex={scrollToIndex}
      width={width}
      // autoWidth
    />
  )
}

个字符
基本上，添加这3个CSS属性并根据父宽度设置一个显式宽度。It works！