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

前言：

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 表格组件的固定列功能时，可能会出现固定列后出现空白间隙的问题，这是因为固定列后，表格容器的宽度发生了变化，从而导致出现了空白间隙。 解决方法：

1. 设置表格容器的宽度 你可以在表格组件上添加 scroll={{ x: 'max-content' }} 属性来设置表格容器的宽度：

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

   这个属性会根据表格内容的宽度自动调整表格容器的宽度，从而避免空白间隙的问题。
2. 使用 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;
  }
}