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

数字沐星人
• 阅读 9247

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...

点赞
收藏
评论区
推荐文章
Python进阶者 Python进阶者
2年前
怎样能自动按列01 列02 最大为列99,来设置列标题?
大家好,我是皮皮。一、前言前几天在Python最强王者交流群有个粉丝咨询了这个问题:获取到数据表的列数比较简单,一般不超过99列,怎样能自动按列01列02最大为列99,来设置列标题?一劳永逸,以后这类场景都这样套用。二、实现过程
Easter79 Easter79
3年前
table thead表头和列浮动固定
!(https://oscimg.oschina.net/oscnet/up61c092661d18a5077afd02d0c000d6a1165.JPEG)查看DEMO演示效果https://gong.gg/mytest/table/index.html(https://www.oschina.net/action/GoToLink?ur
Wesley13 Wesley13
3年前
MYSQL函数group_concat的使用
今天对一批数据要迁移转换,查了下,有group\_concat这个函数简单实现字段的列转行设置,过程记录如下一.测试数据准备mysqlusetest;Databasechangedmysqlselectfromt_kenyon;|id|
Stella981 Stella981
3年前
Spark DataFrame列的合并与拆分
版本说明:Spark2.3.0使用SparkSQL在对数据进行处理的过程中,可能会遇到对一列数据拆分为多列,或者把多列数据合并为一列。这里记录一下目前想到的对DataFrame列数据进行合并和拆分的几种方法。1DataFrame列数据的合并例如:我们有如下数据,想要将三列数据合并为一列,并以“,”分割
Wesley13 Wesley13
3年前
mysql千万级大数据SQL查询优化
1.对查询进行优化,应尽量避免全表扫描,首先应考虑在where及orderby涉及的列上建立索引。2.应尽量避免在where子句中对字段进行null值判断,否则将导致引擎放弃使用索引而进行全表扫描,如:selectidfromtwherenumisnull可以在num上设置默认值0,确保表中num列没有
Wesley13 Wesley13
3年前
MySQL 添加列,修改列,删除列
ALTERTABLE:添加,修改,删除表的列,约束等表的定义。查看列信息:desc表名;修改表名:altertablet\_bookrenametobbb;添加列:altertable表名addcolumn字段名varchar(length);删除列:altertable表名drop
Wesley13 Wesley13
3年前
使用伸缩盒布局创建一个三列布局每一列占用`col
\使用伸缩盒布局创建一个三列布局每一列占用\col{n}\/12份基于父级容器的宽度\Answer设置\.row\类的父级容器为\display:flex;\样式然后使用\flex\缩写形式属性给每一列子元素设置一个\flexgrow\值使得每一列可以按照设置的比例自动协调宽度
Wesley13 Wesley13
3年前
MySQL数据查询(重点)
1.查询所有列  \为所有列select\fromtable\_name;2.查询指定列selectid,agefromtable\_name;3.查询时添加常量列本次查询有效,不会添加到表中,只显示 可以用as来命名本列名select'java0328'fromtable\_name;
Wesley13 Wesley13
3年前
MySQL优化总结+自定义函数之递归
我最近看MySQL优化总结几个可能容易理解错误的技巧:通常来说把可为NULL的列改为NOTNULL不会对性能提升有多少帮助,只是如果计划在列上创建索引,就应该将该列设置为NOTNULL。对整数类型指定宽度,比如INT(11),没有任何卵用。INT使用32位(4个字节)存储空间,那
Wesley13 Wesley13
3年前
mysql——GROUP BY和HAVING
GROUPBY语法可以根据给定数据列的每个成员对查询结果进行分组统计,最终得到一个分组汇总表。select子句中的列名必须为分组列或列函数,列函数对于groupby子句定义的每个组返回一个结果。某个员工信息表结构和数据如下:  id  name  dept  salary  edlevel     hiredate   1  张
Python进阶者 Python进阶者
1年前
盘点一个pandas读取excel数据并处理的小需求
大家好,我是皮皮。一、前言前几天在Python最强王者群【wen】问了一个pandas数据处理的问题,一起来看看吧。通过pandas读取excel数据,其中两列是交易的备注信息,对A列数据筛选并把结果输出到C列。如果A列中有二、实现过程这里【东哥】给了一个