问题:使用antd <Table>组件自带的scroll属性会出现白色空隙,column添加width属性后也无法消除,并且table tbody内不能使用自定义的滚动轴。
解决方法:使用css position:sticky 粘性定位
特性:
- 该属性相当于position:relative 与 position:fixed来回切换。当滚动超出目标区域后,将会切换到fixed状态,固定在目标区域的指定位置
- 不会脱离文档流,保留原本位置
- 需与top / bottom / left / right属性配合使用,否则粘性定位失效(设置偏移量)
- 偏移量的计算是相对于距离它最近的可滚动的祖先元素,否则相对于浏览器视窗计算
thead {
position: -webkit-sticky; //兼容Safari
position: sticky;
top: 0px;
z-index: 1; //防止被滚动后的tbody覆盖
}
tbody {
position: -webkit-sticky; //兼容Safari
position: sticky;
top: 45px; //thead th的高度
}