Antd Table无固定宽度时实现横向滚动的问题

核心问题原因 #

你遇到的问题根源在于：当scroll.x设为'true'时，Ant Design Table 需要父容器具备明确的宽度边界+溢出滚动配置，同时表格总列宽要超过父容器宽度才会触发内部横向滚动。直接给父容器设width:100%但未限制溢出时，表格会自动撑满页面，无法触发滚动。

具体解决步骤 #

1. 给父容器添加溢出滚动样式 #

修改.main-table的CSS，加上overflow: auto，确保内容超出容器时显示滚动条：

.main-table {
  width: 100%;
  overflow: auto; /* 关键：开启容器溢出滚动 */
  /* 若布局是侧边栏+右侧表格的flex结构，需给外层容器加display:flex，同时.main-table设置flex:1 */
}

2. 调整Table的scroll配置 #

把scroll.x从'true'改成'max-content'，让表格根据所有列的宽度总和自动计算自身宽度，当这个宽度超过父容器时，就会触发父容器的横向滚动：

<div className="main-table">
  <Table
    rowSelection={{
      type: 'checkbox',
      ...rowSelection,
    }}
    columns={dataColumns}
    dataSource={dataOrder}
    bordered
    pagination={{ pageSize: 50 }}
    scroll={{ x: 'max-content', y: 240 }} // 替换x的配置项
  />
</div>

3. 确保列宽设置正确 #

所有列（包括设置了fixed: right的最后一列）都要明确设置width属性，避免自动撑开导致总宽度不足：

// 示例columns配置
const dataColumns = [
  { title: '订单号', dataIndex: 'id', width: 150 },
  { title: '客户名称', dataIndex: 'name', width: 200 },
  // ...其他列
  { title: '操作', dataIndex: 'action', width: 120, fixed: 'right' },
];

额外注意事项 #

• 如果是侧边栏固定宽度、右侧表格占满剩余空间的布局，需确保外层容器为display: flex，侧边栏设固定宽度（比如width: 200px），.main-table所在容器设flex: 1和overflow: auto
• 不要给Table组件本身设置width: 100%，让它由列宽和scroll.x控制，父容器负责提供滚动容器

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