antd表格固定列出现空白间隙问题

崽崽的谷雨

已于 2025-02-19 16:30:19 修改

阅读量7.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： react-antd 文章标签： css reactjs

于 2021-03-02 14:13:56 首次发布

本文链接：https://blog.csdn.net/weixin_44058725/article/details/114283397

react-antd 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了解决antd Table组件在设置fixed属性后出现空白间隙的方法，包括动态计算宽度、设置自适应宽度及使用CSS样式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

antd表格设置了fixed属性后，在设置scroll:x的时候会出现空白间隙。

如下图：

解决方案：

1.动态计算宽度


//动态计算columns width属性（width属性不要加单位px）
countX = (arr) => {
    return arr.reduce((cur, next) => {
        return cur + (next.width ? next.width : 0)
    })
}

let columns=[{

    title: "菜单",
    dataIndex: "name",
    width: 160 //切记不要加px
},
{

    title: "查看",
    dataIndex: "view",
    width: 120 //切记不要加px
}
]

//然后table的scroll={{x:countX(columns)}}

2.有的时候columns不确定（即是动态的出现空白间隙问题则需要给其中一项不设置width或者为''）

有的时候columns不确定（即是动态的出现空白间隙问题则需要给其中一项不设置width或者为''）,一般都会给最后一项设置为自适应（不设置width或width=''）；

if(columns.length>0){//当columns为动态时给最后一个项设置为自适应，防止出现空白间隙
   columns[columns.length-1].width='' 
}

3.设置scroll={{ x: 'max-content' }}

当使用 Antd 表格组件的固定列功能时，可能会出现固定列后出现空白间隙的问题，这是因为固定列后，表格容器的宽度发生了变化，从而导致出现了空白间隙。解决方法：

设置表格容器的宽度你可以在表格组件上添加 scroll={{ x: 'max-content' }} 属性来设置表格容器的宽度：
```
<Table columns={columns} dataSource={data} scroll={{ x: 'max-content' }} />
```
这个属性会根据表格内容的宽度自动调整表格容器的宽度，从而避免空白间隙的问题。
使用 CSS 样式调整表格如果以上方法仍然无法解决空白间隙的问题，你可以使用 CSS 样式来调整表格的布局。你可以使用浏览器的开发者工具来分析表格的布局，并调整相应的 CSS 样式来解决问题。例如，你可以通过以下 CSS 样式来设置表格容器的宽度：
```
.ant-table-container { width: max-content; }
```
这个样式会将表格容器的宽度设置为内容的最大宽度，从而避免空白间隙的问题。你可以根据实际情况进行调整。

2025-02-19补充：

我今天又使用了表格，固定了第一列和最后一列，又出现了空白的缝隙，横向滚动时出现的！

代码如下:

const columns:any = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            fixed: 'left',
            width:130
        },
        {
            title: '代码',
            dataIndex: 'age',
            key: 'age',
            width:130
        },
        {
            title: '成立日期',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '策略类型',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '管理人',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '策略场景',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: <span className='headRed'>策略属性</span>,
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '风险等级',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '业绩基准',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '权益中枢',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '目标波动率',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '收益率-近1年',
            dataIndex: 'address',
            sorter:true,
            key: 'address',
            width:130
        },
        {
            title: '收益率指标',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '最大回撤-近1年',
            dataIndex: 'address',
            sorter:true,
            key: 'address',
            width:130
        },
        {
            title: '策略运营人',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '策略主理人',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '点赞人数',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '关注人数',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '公开策略',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '操作',
            fixed: 'right',
            width:200
        },
    ];

const dataSource = [
        {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
        },
        {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
        },
    ];



<div className='table_box'>
    <Table dataSource={dataSource} columns={columns}  scroll={{x:'max-content'}}/>
</div>

效果图如下：

我的解决方案：是给其中一个不固定的列的width属性去掉即可。

const columns:any = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            fixed: 'left',
            width:130
        },
        {
            title: '代码',
            dataIndex: 'age',
            key: 'age',
            width:130
        },
        {
            title: '成立日期',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '策略类型',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '管理人',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '策略场景',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: <span className='headRed'>策略属性</span>,
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '风险等级',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '业绩基准',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '权益中枢',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '目标波动率',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '收益率-近1年',
            dataIndex: 'address',
            sorter:true,
            key: 'address',
            width:130
        },
        {
            title: '收益率指标',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '最大回撤-近1年',
            dataIndex: 'address',
            sorter:true,
            key: 'address',
            width:130
        },
        {
            title: '策略运营人',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '策略主理人',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '点赞人数',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '关注人数',
            dataIndex: 'address',
            key: 'address',
            width:130
        },
        {
            title: '公开策略',
            dataIndex: 'address',
            key: 'address',
            //width:130
        },
        {
            title: '操作',
            fixed: 'right',
            width:200
        },
    ];

const dataSource = [
        {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
        },
        {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
        },
    ];



<div className='table_box'>
    <Table dataSource={dataSource} columns={columns}  scroll={{x:'max-content'}}/>
</div>

效果图：

后来我这样写：

x:2670就是 columns里所有的width属性相加得出来的，这样写还是有缝隙，但我 x写成2680就又没了！！！所以你如果遇到了，也可以把x值设置比实际的多10px或者更多。

 <div className='table_box'>
     <Table dataSource={dataSource} columns={columns}  scroll={{x:2670}}/>
 </div>

总结：

antd 的Table组件还会有其他坑，比如设置宽度不起效，设置背景颜色不起效等。一般样式问题都需要层层找类名强行覆盖（!important）或者使用:global.

例如：

.menu {
  :global(.anticon) {
    margin-right: 8px;
  }
  :global(.ant-dropdown-menu-item) {
    min-width: 160px;
  }
}