如何禁用Ant Design Table的冻结列且保留横向滚动条

实现原理 #

Ant Design Table的横向滚动条和列冻结是两个独立的配置逻辑：

• 横向滚动条仅需配置scroll.x属性，当赋值的宽度大于表格可视容器宽度时就会自动生效，不依赖列的固定配置
• 列冻结（固定列）效果完全由列配置项中的fixed属性控制，移除该属性即可取消对应列的固定效果

具体操作步骤 #

• 保留Table组件上的scroll={{ x: 1300 }}配置，不要删除或修改该值，这是横向滚动条正常显示的核心
• 找到columns配置数组中Full Name、Age、action三个列的配置项，删除这三个列上所有fixed: 'left'或fixed: 'right'的属性配置，列的width配置可以保留，不影响效果

代码示例 #

修改后的完整配置参考：

// 列配置：移除三个目标列的fixed属性
const columns = [
  {
    title: 'Full Name',
    dataIndex: 'name',
    width: 100,
    //  删除原有的 fixed: 'left' 配置
  },
  {
    title: 'Age',
    dataIndex: 'age',
    width: 80,
    //  删除原有的 fixed: 'left' 配置
  },
  // 其余普通业务列配置保持不变
  {
    title: 'Columns 1',
    dataIndex: 'address1',
    width: 200,
  },
  {
    title: 'Columns 2',
    dataIndex: 'address2',
    width: 200,
  },
  {
    title: 'Columns 3',
    dataIndex: 'address3',
    width: 200,
  },
  {
    title: 'action',
    dataIndex: 'action',
    width: 120,
    //  删除原有的 fixed: 'right' 配置
  }
];

// Table组件保留scroll.x配置，即可正常显示横向滚动条
<Table
  columns={columns}
  dataSource={data}
  scroll={{
    x: 1300,
  }}
/>

注意：如果删除scroll.x配置，即使所有列的总宽度超出表格容器，也不会触发横向滚动条，因此该配置必须保留。

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