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

此篇乃小伙伴们在花式踩坑antdesign的Table组件后,总结的专治对不齐的十全大补丸,望君趁早服用及时康复,如果你还踩出了更多花样对不齐,欢迎臭jio的你前来补充?。

一:问题概览

序号 异常表现 产生原因 解决方案
1 1.纵向/列对不齐 1.1.有列(column)没有设置宽度 为所有column设置width
2 1.2.语句/单词过长 打破语句与单词,强制折行
3 1.3.开启了单选功能 给单选的表头添加文字,例如“单选”,撑开表头
4 2.横向/行对不齐 2.1.固定(fixed)列的高度高于普通列 1.左侧fixed不对齐:检查是否rowkey唯一 2.右侧fixed不对齐:解决方案PR审核中
5 3.列间有空白间隙/留白 3.1.列数不固定、需适配不同尺寸屏幕 动态设置fixed,比较列总宽与table宽度
6 3.2.scroll.x计算错误 设置scroll.x为所有列的总宽度,包括fixed列
7 4.双滚动条 4.1.macOS在系统偏好设置为 “显示滚动条-滚动时”会出现双滚动条 自定义滚动条, 滚动条常显

二:问题详细描述及demo

1.纵向/列对不齐

1.1.有列(column)没有设置宽度:表头固定时,导致表头宽度计算错误,表头列和内容列对不齐

在这里插入图片描述

1.2.语句/单词过长: antd根据语义/单词断句换行,实际列
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值