问题描述:
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里找找。或者提问作者。开源社区很强大。