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

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

一 使用

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

  <Table
    columns={columns}//数据展示格式
    dataSource={data}//数据渲染内容
    bordered
    size="middle"
    scroll={{ x: '130%', y: 240 }}/如果不需要滑动条这一行可以去掉～
  />

二 细节

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

1. 分页的使用，

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

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

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

<Table 
       pagination={{  // 分页	
         simple: true, //当添加该属性时，显示为简单分页
         current: this.state.current, //当前页数
         total: this.state.total2, //数据总数
         onChange: this.changePage, //页码改变的回调，参数是改变后的页码及每页条数
         pagination=pageSize: 4 //每页条数
       }} 
/>

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

在columns的设置中，我们可以给每一列元素加一个宽度，这个宽度可以是
宽：width：number 或者是 width：“number%”
高度：我们可以通过控制台找到他的th元素，手动给它设置高度

3.滑动scroll（列对不齐）

scroll={{ x: ‘130%’}}如内容所示，他的滚动条，是table宽度的130%
当我们这是滑动的时候，有时会需要左侧或者右侧的几列固定在边缘，首先我们要在columns上给对应title的内容这是fixed：left/right，我希望我的table表格可以永远对齐，但是在大屏幕上拉伸是测试时，它总会不对齐，所有我想到了一个粗暴的方法，找到下面的类名，对齐这是百分比宽度，百分比的具体数字是你设计高上的 固定宽度/表格宽度，这样基本上可以做到表格对齐

  .ant-table-fixed-right{
  width: 13.2%;
}