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 ...
随机推荐
- Myeclipse 方法中文注释看不到
参考以下几种解决方式: 1 改变整个文件类型的编码格式 1) eclipse->window->preferences->General->Content Types 2) 找 ...
- PHP header 的7种用法
这篇文章介绍的内容是关于PHP header()的7种用法 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 PHP header 的7种用法 1. 跳转页面 header('Locat ...
- 1x1卷积
你可能会想为什么有人会用1x1卷积,因为它关注的不是一块像素,而是一个像素,图1 图1 我们看看传统的卷积,它基本上是运行在一个小块图像上的小分类器,但仅仅是个线性分类器.图2 图2 如果你在中间加一 ...
- Protobuf c的使用范例
protobuffer (简称PB) 网上的文章一大堆,随便看看,PB使用起来非常方便.这里主要讲讲Protobuf C(简称PC)的使用 1,代码 https://github.com/protob ...
- 神经网络入门——7or 感知器
OR 感知器 OR 感知器与 AND 感知器很类似,在下图中,OR 感知器与 AND 感知器有相同的分割线,只是 OR 感知器分割线下移了一段距离.对权重或者偏置做怎样的设置可以实现这个效果?用下面的 ...
- 给radio添加点击事件
1.单独给每个radio添加点击事件 <fieldset id="form-gra-time"> <legend>请选择日期粒度:</legend&g ...
- 各种浏览器的兼容css
http://blog.csdn.net/wyx100/article/details/50450728 1.Mozilla内核[css]元素选择器{-moz-transition:运动的样式 持续时 ...
- C#面向对象--命名空间与类库
1.命名空间 在源代码文件开头使用using语句引用 命名空间,就可以直接使用其中的类而不再需要指明其所属的命名空间. .NET Framework使用命名空间来管理所有的类. 类的修饰符: pu ...
- 分布式TensorFlow集群local server使用详解
通过local server理解分布式TensorFlow集群的应用与实现. 简介 TensorFlow从0.8版本开始,支持分布式集群,并且自带了local server方便测试. Local ...
- vector容器、
一. vector 向量容器1. 创建 vector 对象(1)不指定容器大小vector<int> V;(2)指定容器大小vector<int> V(10);(3) ...