antd表格固定后出现，对不齐的现象，解决方案

问题描述：

antd表格固定后出现对不齐的现象，比如设置了fixed。如下图

这个是官方的bug，在后续版本修复了

在3.26.1里修复了。

antd表格固定列对不齐现象https://github.com/ant-design/ant-design/issues/19952

解决方案：

1.升级版本（方案一）

但对于老项目，升级成本高或者暂时无法升级的就只能用样式强行控制了

2.样式控制（方案二）

(1).github 上antd issues 19952给了一个方案

这个滚动条会很奇怪

antd表格固定列对不齐现象https://github.com/ant-design/ant-design/issues/19952

.ant-table {//设置表格头部竖向滚动宽度
.ant-table-header::-webkit-scrollbar {width: 4px;
}//设置表格体滚动宽度
.ant-table-body, .ant-table-body-inner {&::-webkit-scrollbar {width: 4px;height: 4px;}&::-webkit-scrollbar-thumb {border-radius: 4px;box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: #909090;}&::-webkit-scrollbar-track {box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 4px;background: #EDEDED;}
}//解决固定列底部预留的空隙
.ant-table-fixed-left, .ant-table-fixed-right {.ant-table-body-outer {margin-bottom: 0 !important;}
}
}

（2）下面这个也可以

.ant-table-hide-scrollbar::-webkit-scrollbar {width: 17px; //或者15px
}

chatGPT方案：

当使用 Antd 表格组件的固定列功能时，可能会出现单元格对不齐的问题，这是因为固定列后，列宽度发生了变化，导致单元格的宽度也发生了变化，从而出现了对不齐的现象。解决方法：

设置表格列的宽度可以通过设置表格列的宽度来避免单元格对不齐的问题。你可以通过以下方式设置列宽度：

const columns = [{title: '列1',dataIndex: 'col1',width: 200, // 设置列宽度为 200px},{title: '列2',dataIndex: 'col2',width: 300, // 设置列宽度为 300px},// ...
];

注意，如果你设置了列宽度，则需要确保所有列的宽度之和等于表格容器的宽度，否则可能会出现水平滚动条。

2.设置表格容器的宽度如果你没有设置列宽度，可以通过设置表格容器的宽度来避免单元格对不齐的问题。你可以在表格组件上添加 scroll={{ x: 'max-content' }} 属性来设置表格容器的宽度：

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

这个属性会根据表格内容的宽度自动调整表格容器的宽度，从而避免单元格对不齐的问题。

3.使用 CSS 样式调整表格如果以上两种方法仍然无法解决单元格对不齐的问题，你可以使用 CSS 样式来调整表格的布局。你可以使用浏览器的开发者工具来分析表格的布局，并调整相应的 CSS 样式来解决问题。例如，你可以通过以下 CSS 样式来设置表格列的宽度：

.ant-table-thead > tr > th:first-child {width: 200px;
}
.ant-table-thead > tr > th:last-child {width: 300px;
}

总结：

用到第三方插件库，遇到问题百度没找到方案，可以直接去github上其对应的库里issues里找找。或者提问作者。开源社区很强大。