ant-design Table组件错位/对不齐

此篇乃小伙伴们在花式踩坑antdesign的Table组件后，总结的专治对不齐的十全大补丸，望君趁早服用及时康复，如果你还踩出了更多花样对不齐，欢迎臭jio的你前来补充?。

一：问题概览

序号	异常表现	产生原因	解决方案
1	1.纵向/列对不齐	1.1.有列(column)没有设置宽度	为所有column设置width
2		1.2.语句/单词过长	打破语句与单词，强制折行
3		1.3.开启了单选功能	给单选的表头添加文字，例如“单选”，撑开表头
4	2.横向/行对不齐	2.1.固定(fixed)列的高度高于普通列	1.左侧fixed不对齐：检查是否rowkey唯一 2.右侧fixed不对齐：解决方案PR审核中
5	3.列间有空白间隙/留白	3.1.列数不固定、需适配不同尺寸屏幕	动态设置fixed，比较列总宽与table宽度
6		3.2.scroll.x计算错误	设置scroll.x为所有列的总宽度，包括fixed列
7	4.双滚动条	4.1.macOS在系统偏好设置为 “显示滚动条-滚动时”会出现双滚动条	自定义滚动条， 滚动条常显

二：问题详细描述及demo

1.纵向/列对不齐

1.1.有列(column)没有设置宽度：表头固定时，导致表头宽度计算错误，表头列和内容列对不齐

1.2.语句/单词过长： antd根据语义/单词断句换行，实际列宽超出了设置的宽度，导致列对不齐；

错误demo❌

正确demo✅

1.3.开启了单选功能：单选列表头宽度计算错误，导致列对不齐

2.横向/行对不齐

2.1.固定(fixed)列的高度高于普通列：普通列的高度与fixed列的高度不同，导致行对不齐；反之没问题

3.列间有空白间隙/留白

3.1.列数不固定、需适配不同尺寸屏幕：需适配4种情况：小屏列少、小屏列多、大屏列少、大屏列多

为了适配小屏多列，我们会fixed某些列，column设置的width由比例变为px。
当切到大屏时，同样列数宽度可能铺不满表格

小屏多列，适合fixed demo✅

大屏同样列数，留白 demo❌
、

3.2.scroll.x计算错误:

antd文档：

建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x

个人建议：设置scroll.x为所有列的总宽度，包括fixed列.

（这里有一条我们自己系统的代码需要检查的点：检查TableContainer组件是否留有buffer，有的话移除）

4.双滚动条

4.1.macOS在系统偏好设置为 “显示滚动条-滚动时”会出现双滚动条

三：解决方案代码

1.纵向/列对不齐

1.1.有列(column)没有设置宽度： 为所有column设置width（或统一赋默认值）

const width = item.width || 100;

1.2.语句/单词过长：

a.打破语句与单词，强制折行;

.ant-table-thead > tr > th, .ant-table-tbody > tr > td {
  padding: 16px 16px;
  word-break: break-word;
  -ms-word-break: break-all;
}

b.当column自定义了render，并在render中嵌套了dom元素,需在dom内联样式中设置

 word-break: break-word；

1.3.开启了单选功能

给单选的表头添加文字，例如demo中的“单选”，撑开表头

2.横向/行对不齐

2.1.固定(fixed)列的高度高于普通列

a. 左侧fixed不对齐：确保rowKey唯一性。
当row无唯一key时，rowkey值用random或new Date()方式生成，虽然不会再报错rowKey不唯一，但是因为是动态数据，导致无法找到指定fixed tr 为其添加height值。
产生问题代码

handlerowKey(value: string) {
  return new Date().toDateString() + Math.random() + value;
}

b. 右侧fixed不对齐：解决方案PR审核中
https://github.com/ant-design/ant-design/issues/14859
https://github.com/react-component/table/pull/283

3.列间有空白间隙/留白

3.1.列数不固定、需适配不同尺寸屏幕：动态设置fixed，比较列总宽与table宽度

<Table
  bordered={true}
  loading={loading}
  columns={this.state.columns}
  dataSource={sortTableData ||  tableData}
  rowKey="tc_code"
  pagination={false}
  scroll={{ x: this.state.scrollWidth}}
  ref={(ref) => { this.refDom = ref; }}
/>
// 获取table宽度
const $tableContainer = ReactDom.findDOMNode(this.refDom);
const tableWidth = ($tableContainer as any).offsetWidth;
// 获取滚动总宽度

const = columnNum * columnWidth;
{
  title: this.props.intl.formatMessage(messages.tc_list),
  dataIndex: 'tc_code',
  key: 'tc_code',
  fixed: scrollWidth > this.state.tableWidth ? 'left' : '',
  width: 150,
}

（我们系统代码实现可参考sds tcDataChart模块）

3.2.scroll.x计算错误: 设置scroll.x为所有列的总宽度，包括fixed列.

（我们的系统代码：检查TableContainer组件是否留有buffer，有的话移除）

// 预留20 buffer
this.x = this.x + 20;

4.双滚动条

4.1.macOS在系统偏好设置为 “显示滚动条-滚动时”会出现双滚动条: 自定义滚动条， 滚动条常显

::-webkit-scrollbar{
  width:12px;
  height:12px;
}
::-webkit-scrollbar-track-piece {
  background-color: #f8f8f8;
}
::-webkit-scrollbar-thumb{
  border: 3px solid #f6f6f6;
  background-color: #ccc;
  -webkit-border-radius:20px;
}
::-webkit-scrollbar-thumb:active{
  -webkit-border-radius:20px;
  background-color: #7f7f7f;
}
::-webkit-scrollbar-corner {
  background-color: #f6f6f6;
  -webkit-border-bottom-right-radius: 5px;
}

.navigation::-webkit-scrollbar {
  width: 3px;
  height: 0px;
}
.navigation::-webkit-scrollbar-button {
  display: none;
}
.navigation::-webkit-scrollbar-track-piece {
  background-color: #404040;
}
.navigation::-webkit-scrollbar-thumb {
  border: 1px solid rgb(52, 143, 247);
  background-color: rgb(52, 143, 247);
  -webkit-border-radius: 3px;
  border-radius: 3px;
}