Antd表格small时，表头滚动条问题

当左右两侧列固定fixed时，总有这样那样兼容性问题

1.头部滚动条，很好解决我们设 .
ant-table-hide-scrollbar { &::-webkit-scrollbar {background:transparent !important; }}

这是表头滚动条的宽度还是存在的

2.表格宽度大于屏幕宽度时，横向有滚动条，当小于时，底部也有一个不能滚动的滚动条。

查看dom结构和css样式发现默认的overflow为scroll。知道了原因就好解决了，

我们设为 .ant-table-body { overflow:auto !important; }

步骤2

3.步骤2 会导致一个问题，当表格只有一条数据，或tbody高度小于设置scrooll的Y值，tbody 纵向是没有滚动条的，而表头是有的，就会出现内容错开对不齐的问题。

4.有的同学会说，表头也可以给他设宽度0 width:0 啊，这样就会导致，tbody数据大于设置scrooll的Y值时，又会和表头对不齐。

解决办法：

.ant-table-body { overflow:auto !important; }
.ant-table-hide-scrollbar { &::-webkit-scrollbar { background:transparent !important; }}

.change-scrollBar { &::-webkit-scrollbar { width:0 !important; }}

我这边是用JS去计算，当前tbody的的scrollHeight是否小于设置scrooll的Y值，来动态的添加类(change-scrollBar)，控制表头滚动条的宽度。

当前tbody的的scrollHeight是否小于设置scrooll的Y值，表头表体都没有scroll的宽度，就对齐咯

气死我上才艺
// table small时表头和表体滚动条处理

export const checkScrollBar = () => {

let antTableBody =document.querySelector('.ant-table-body')

let antTableBodyScrollHeight = antTableBody && antTableBody.scrollHeight

let antTableFixHeader =document.querySelector('.ant-table-hide-scrollbar')

if (antTableBodyScrollHeight <470) {

antTableFixHeader && antTableFixHeader.classList.add('change-scrollBal')

} else {

antTableFixHeader && antTableFixHeader.classList.remove('change-scrollBal')

}