当左右两侧 列固定fixed时,总有这样那样兼容性问题
1.头部滚动条,很好解决 我们设 .
ant-table-hide-scrollbar { &::-webkit-scrollbar {background:transparent !important; }}
这是表头滚动条的宽度还是存在的
2.表格宽度大于屏幕宽度时,横向有滚动条,当小于时,底部也有 一个不能滚动的滚动条。
查看dom结构和css样式发现 默认的overflow为scroll。知道了原因就好解决了,
我们设为 .ant-table-body { overflow:auto !important; }
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')
}
}