现在有一个表格,里面的列数是不固定的(可以重复写入数据),且列数行数都可能很多,就带来一个问题:

  必须要固定表头,但是antd 的表格组件设置了固定表格

    scroll={{x:1000,y:300}}

  这个 x 必须设置且一定不能这样设置,同时columns设置除最后一行外每行的 width

  然而并没有什么卵用 -。-

  关键点还是在于 x ,文档中讲可以为百分数、数字 和true,由于列数不固定,百分数也不靠谱

  最后这样解决的:

  计算列数,大致得到最宽列所对应的宽度,然后设置 columns.length * maxWidth  ,这样就刚好合适了,只是本没有那么宽的列也会被拉伸,但我的需求达到了。

  如果有人发现了更好的办法,请不吝赐教。

ant design 的Table组件固定表头时不对齐的更多相关文章

  1. 解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐

    一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...

  2. 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐

    在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...

  3. 封装一个漂亮的ant design form标签组件

    在ant design 的form组件中 能用于提交的组件比较少,所以我在这写了一个可以单选.多选标签提交的组件,调用非常简单. 代码: import React,{Fragment} from 'r ...

  4. 使用Ant Design的select组件时placeholder不生效/不起作用的解决办法

    先来说说使用Ant Design和Element-ui的感觉吧. 公司的项目开发中用的是vue+element-ui,使用了一通下来后,觉得element-ui虽然也有一些问题或坑,但这些小问题或坑凭 ...

  5. iview中,table组件在缩进时产生的bug。

    问题描述: 在父元素因为缩进的关系撑开时,table组件不会因为父元素的撑开而自适应,问题如图 解决办法:在父一级的组件中使用table {width: 100% !important},强制使表格宽 ...

  6. react的ant design的UI组件库

    PC官网:https://ant.design/ 移动端网址:https://mobile.ant.design/docs/react/introduce-cn antd-mobile :是 Ant ...

  7. table创建固定表头

    布局:两个div,上部内容将表头复制,高度固定,下部div内部将table设置为margin:-**px; 隐藏掉表头,下部div设置overflow,即可. 代码:

  8. Ant Design的Form组件中FormItem名称相同引起的问题

    1.问题描述 在使用Antd组件Form表单的过程中,会出现FormItem同名的情况,此时要特别注意同名引起的表单行为异常问题,主要表现在以下方面: (1)同名表单项的值共享,并且其中一个的值改变, ...

  9. element-ui table组件使用v-if时的问题

    element-ui项目中经常遇到需要使用v-if指令来根据情况动态显示隐藏某些列情况,这时就会出现滚动条样式异常.列错乱.列宽错乱等问题 解决办法:在el-table上添加:key="Ma ...

随机推荐

  1. AtCoder Beginner Contest 078 C HSI

    虽说这是个水题,但是我做了大概有一个小时吧,才找到规律,刚学概率,还不大会做题. 找到规律后,又想了想,才想到推导过程. 思路:想要知道花费的时间,就要知道提交的次数,我在这里是计算的提交次数的期望, ...

  2. macOS上搭建RabbitMQ+MQTT服务器

    1. 下载RabbitMQhttps://www.rabbitmq.com/install-standalone-mac.html或通过brew直接安装RabbitMQ brew install ra ...

  3. 各种浏览器怎么换ip

    https://jingyan.baidu.com/article/e4d08ffdb784050fd2f60ddd.html 方法/步骤   1 用浏览器搜索ip,得到自己当前的ip. 2 用浏览器 ...

  4. java三大循环结构

    用于处理需要重复执行的操作: 根据判断条件的成立与否,决定程序段落的执行次数,而这个程序段落我们称为循环体: while:事先不需要知道循环执行多少次: do  while:同上,只是至少要执行一次( ...

  5. 【知识小结】PHP使用svn笔记总结

    在公司里,我们要养成每天上班前更新代码,下班前提交代码的习惯,并且做好说明. svn更新代码的时候,先右键点击需要更新的项目,在team中进入资源库同步界面,选择incoming mode,显示的文件 ...

  6. p2p平台详细运营框架

    市场拓展部1.负责完成公司市场销售.市场拓展.费用控制等年度目标任务,并负责将目标责任制分解落实,确保各项工作目标得以实现.2.对营销政策.市场及同业营销动态等方面进行调研分析,及时调整营销策略和计划 ...

  7. H5 移动端获取当前位置

    3种方法:1.H5自带的方法,获取经纬度2.通过地图提供的JS.获取位置3.通过微信的API(这个需要公众号 / 小程序) 1.通过H5自带的获取经纬度的方法 优点: 需要引用的资源较少,H5自带的方 ...

  8. 清除SVN未版控文件

    用Git时,git clean -df 可以清除所有没有add的文件,得到一个干净的工作空间. 用SVN没有这样的命令,当然可以 svn export 得到一个干净的工作空间,但会花很长时间,而且没有 ...

  9. 带你认识“货真价实”的P2P网贷风控

      文/杨帆 说起P2P,多数金融圈内人士已经并不陌生.国内现有近千家的P2P网贷平台,动辄打出高息诱人的收益率宣传口号以及眼花缭乱的安全承诺.但是在这些浮华表面的背后,关于P2P的风控很多人仍然是一 ...

  10. HTML5中Js多线程编程

    Web Worker Web Worker是HTML5提出的新标准,为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行.在主线程运行的同时,Work ...