ant design 的Table组件固定表头时不对齐
现在有一个表格，里面的列数是不固定的（可以重复写入数据），且列数行数都可能很多，就带来一个问题：
必须要固定表头，但是antd 的表格组件设置了固定表格
scroll={{x:1000,y:300}}
这个 x 必须设置且一定不能这样设置，同时columns设置除最后一行外每行的 width
然而并没有什么卵用 -。-
关键点还是在于 x ，文档中讲可以为百分数、数字 和true，由于列数不固定，百分数也不靠谱
最后这样解决的：
计算列数，大致得到最宽列所对应的宽度，然后设置 columns.length * maxWidth ，这样就刚好合适了，只是本没有那么宽的列也会被拉伸，但我的需求达到了。
如果有人发现了更好的办法，请不吝赐教。
ant design 的Table组件固定表头时不对齐的更多相关文章
- 解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐
一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...
- 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐
在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...
- 封装一个漂亮的ant design form标签组件
在ant design 的form组件中 能用于提交的组件比较少,所以我在这写了一个可以单选.多选标签提交的组件,调用非常简单. 代码: import React,{Fragment} from 'r ...
- 使用Ant Design的select组件时placeholder不生效/不起作用的解决办法
先来说说使用Ant Design和Element-ui的感觉吧. 公司的项目开发中用的是vue+element-ui,使用了一通下来后,觉得element-ui虽然也有一些问题或坑,但这些小问题或坑凭 ...
- iview中，table组件在缩进时产生的bug。
问题描述: 在父元素因为缩进的关系撑开时,table组件不会因为父元素的撑开而自适应,问题如图 解决办法:在父一级的组件中使用table {width: 100% !important},强制使表格宽 ...
- react的ant design的UI组件库
PC官网:https://ant.design/ 移动端网址:https://mobile.ant.design/docs/react/introduce-cn antd-mobile :是 Ant ...
- table创建固定表头
布局:两个div,上部内容将表头复制,高度固定,下部div内部将table设置为margin:-**px; 隐藏掉表头,下部div设置overflow,即可. 代码:
- Ant Design的Form组件中FormItem名称相同引起的问题
1.问题描述 在使用Antd组件Form表单的过程中,会出现FormItem同名的情况,此时要特别注意同名引起的表单行为异常问题,主要表现在以下方面: (1)同名表单项的值共享,并且其中一个的值改变, ...
- element-ui table组件使用v-if时的问题
element-ui项目中经常遇到需要使用v-if指令来根据情况动态显示隐藏某些列情况,这时就会出现滚动条样式异常.列错乱.列宽错乱等问题 解决办法:在el-table上添加:key="Ma ...
随机推荐
- opencv安装
1下载OpenCV-2.3.1-win-superpack.exe安装到指定路径下(随意)二.设置全局变量 右击“我的电脑”选“属性”,点“高级系统属性”,点“环境变量”,在用户变量中新建两个用户变量 ...
- VS中计算程序运行时间
VS中计算程序运行的时间 http://bbs.csdn.net/topics/39068881 有时候在设计程序完了之后需要计算程序运行的时间. 这时候可以使用Windows的库函数 GetIi ...
- Boadload和Image$$??$$Limit含义
Bootloader 即引导加载程序,是系统加电后运行的第一段软件代码.简单的说它们都是bootloader,所完成的任务也大同小异. 熟悉x86体系结构的朋友肯定知道,x86平台上bootloade ...
- 淘宝(阿里百川)手机客户端开发日记第二篇 android首页之顶部轮播特效制作 (二)
1.我们来设计flash_slide.xml 布局,这个xml主要做成模块化,方便其它的activity可以动态去调用. flash_slide.xml内容如下: <?xml version=& ...
- HOWTO：制作 Windows 7 加速部署映像(作者:苏繁)
加速部署映像 - 也就是我们通常说的系统模板,通常我们为了提高 Windows 的安装速度,会事先制作一套包含驱动.应用软件.补丁程序以及自定义设置的标准化系统.这样我们在使用该加速部署映像完成安装后 ...
- CentOS 6.7平台Hadoop 1.2.1环境搭建
本教程使用Vultr的VPS搭建,主要实现HDFS和MapReduce两个功能. master.hadoop - 45.32.90.100 slave1.hadoop - 45.32.92.47 sl ...
- html5 文件拖拽上传
本文首先发表在 码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...
- elasticsearch------java操作之QueryBuilders构建搜索Query
版权声明:本文为非原创文章,出处:http://blog.csdn.net/xiaohulunb/article/details/37877435. elasticsearch 分布式搜索系列专栏:h ...
- 跨域问题实践总结!下( [HTML5] postMessage+服务器端（反向代理服务器+CORS Cross-Origin Resource Sharing）)
4. [HTML5] postMessage 问题: 对于跨域问题,研究了一下html5的postMessage,写了代码测试了一下,感觉html5新功能就是好用啊.此文仅使用html5的新特性pos ...
- webp图片实践之路（转载）
最近,我们在项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中.传闻IOS10也将要支持webp,那么使用webp带来的性能提升将更加明显.估计在不久的将来,webp会成为标配. ...