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='' 
}

chatGPT：

当使用 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; }

   这个样式会将表格容器的宽度设置为内容的最大宽度，从而避免空白间隙的问题。你可以根据实际情况进行调整。

总结：

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

 例如：

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