解决react使用antd table组件固定表头后,表头和表体列不对齐

此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决。

按照官网说的:

1、若列头与内容不对齐或出现列重复,请指定固定列的宽度 width。如果指定 width 不生效,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局

2、建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 scroll.x

如果按照以上方法处理还是存在部分偏差,可以尝试给需要固定表头table设置css属性table-layout:fixed。

可以看到官网在3.24.0版本后table组件的属性新增了tableLayouthttps://ant.design/components/table-cn/#API 。其默认值说明里也介绍了:固定表头/列或使用了 column.ellipsis时,默认值为 fixed

如果给column设置啦属性ellipsis:true,table的tableLayout会默认为fixed。

当然添加table-layout:fixed的同时还是需要满足官网说的给每列设置width、scroll.x 大于表格宽度的值。

猜你喜欢

转载自www.cnblogs.com/amor17/p/11775585.html
今日推荐