ant table组件使用心得-表头不对齐解决办法

下面是我闲暇时总结的JS、CSS、算法总结,欢迎大家点赞、star~~
  • 有趣实用的CSS效果
  • 前端博客 传送门
  • LeetCode个人题解 传送门

正文

实习期间遇到需要列表展示数据的需求,从ant开源库上拿下来示例代码如下
使用的场景时在react项目中,所有直接引入

一、使用

1.引入组件
import { Table } from 'antd';
2.手动写入需要渲染的数据
这里不细说了,在模版中,为你提供了很多种排列方式,有跨行显示,也有跨列显示
3.render中写table组件

二、细节

这里面的属性基本行应可以满足我们的基本的需求了,但在实际操作中仍会有一阻碍,我简单的列了几点。

1.分页的使用

当我们数据量过多时,自然而然的就需要分页,我们来看一下官方是如何描述的

pagination 分页器,参考配置项或 pagination,设为 false 时不展示和进行分页

我们在实际中运用时:他的更多api详见 分页pagination

2.设置行高,列宽等等样式相关属性

在columns的设置中,我们可以给每一列元素加一个宽度,这个宽度可以是

  • 宽:width:number 或者是 width:“number%”
  • 高度:我们可以通过控制台找到他的th元素,手动给它设置高度

3.滑动scroll(列对不齐)

scroll={{ x: '130%'}}
如内容所示,他的滚动条,是table宽度的130%

遇到问题

当我们设置滑动的时候,有时会需要左侧或者右侧的几列固定在边缘

  • 首先我们要在columns上给对应title的内容这是fixed:left/right
  • *我希望我的table表格可以永远对齐,但是在大屏幕上拉伸是测试时,它总会不对齐。

如何解决?

  • 找到ant-table-row,或行类名对其设置,百分比宽度。
  • 对你要固定的左侧或右侧也设置比例的宽度
.ant-table-fixed-right{
	width: 13.2%;
}

你可能感兴趣的:(【前端知识集合】)