Arco Design Table表头固定后内容滚动消失怎么办？

码农慧丽提问于 2026-02-14 04:33:27 阅读 28

组件

在用Arco Table做固定表头时，设置scroll={{ x: true }}和columns的fixed属性后，横向滚动时部分内容会突然消失，这是什么问题？

尝试过把表格包裹在固定高度的div里，设置maxHeight: '400px'也没用。滚动到右侧时表格行像被截断了一样，控制台没有报错但视觉效果完全不对。


const columns = [
  { title: 'ID', dataIndex: 'id', fixed: 'left' },
  { title: '名称', dataIndex: 'name' },
  // 其他10+列...
  { title: '操作', fixed: 'right' }
];

return (
  <Table 
    columns={columns} 
    dataSource={data} 
    scroll={{ x: 1500 }} 
    rowKey="id"
  />
);

我来解答赞 9 收藏

反馈

1 条解答

UE丶振岚 Lv1

这个问题我遇到过，主要是Arco Design的Table在固定列和横向滚动时样式计算有问题，尤其是当内容宽度超出容器时会出现渲染异常。解决办法是强制给表格加上一个最小宽度，并且确保父容器的overflow属性正确。

代码放这了：

const columns = [

  { title: 'ID', dataIndex: 'id', fixed: 'left' },

  { title: '名称', dataIndex: 'name' },

  // 其他10+列...

  { title: '操作', fixed: 'right' }

];



return (

  <div style={{ overflowX: 'auto', width: '100%' }}>

    <Table 

      columns={columns} 

      dataSource={data} 

      scroll={{ x: 'max-content' }} 

      rowKey="id"

      style={{ minWidth: 1500 }}

    />

  </div>

);

关键点是scroll.x设置为'max-content'，这样能自动适配表格内容宽度，同时给Table加一个minWidth保证内容不会被截断。外面再套一层div，设置overflowX: 'auto'，让滚动条正常显示。

如果你的数据列特别多或者列宽不固定，还可以试试动态计算宽度，但上面这个方法已经能解决90%的情况了。反正我是这么干的，复制粘贴就行，别折腾了。

2026-02-14 11:02