ant-design Table组件错位/对不齐

Posted 2021-09-04 一個路人

1.纵向/列对不齐
1.1.有列(column)没有设置宽度：表头固定时，导致表头宽度计算错误，表头列和内容列对不齐

1.2.语句/单词过长： antd根据语义/单词断句换行，实际列宽超出了设置的宽度，导致列对不齐；

1.3.开启了单选功能：单选列表头宽度计算错误，导致列对不齐

2.横向/行对不齐
2.1.固定(fixed)列的高度高于普通列：普通列的高度与fixed列的高度不同，导致行对不齐；反之没问题

3.列间有空白间隙/留白
3.1.列数不固定、需适配不同尺寸屏幕：需适配4种情况：小屏列少、小屏列多、大屏列少、大屏列多
为了适配小屏多列，我们会fixed某些列，column设置的width由比例变为px。
当切到大屏时，同样列数宽度可能铺不满表格

3.2.scroll.x计算错误:
antd文档：

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

个人建议：设置scroll.x为所有列的总宽度，包括fixed列.

（这里有一条我们自己系统的代码需要检查的点：检查TableContainer组件是否留有buffer，有的话移除）

4.双滚动条
4.1.macOS在系统偏好设置为 “显示滚动条-滚动时”会出现双滚动条

————————————————
版权声明：本文为CSDN博主「超级小码丽」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/baozhuo...