Angular-Win10系统-Chrome浏览器-NG-ZORRO-table组件-固定表头-表格列明显错位。这个问题是NG-ZORRO本身就有的问题,目前发现只在Win10系统-Chrome浏览器下有问题,win7、IE都没问题。
错位情况如图所示:截图自官网
表格错位是因为表头的滚动条宽度变窄了,导致错位。
我发现出现这个问题的原因是 .nz-table-hide-scrollbar的样式影响了滚动条自身的宽度
在代码中去掉这个类名,然后重新添加overflow-y: scroll;
滚动条的宽度就正常了
因为解决这个问题,可以手动为滚动条加上一个宽度
.nz-table-hide-scrollbar::-webkit-scrollbar {
width: 17px;
}
::-webkit-scrollbar:可以使用伪元素为Webkit浏览器自定义滚动条的各个部分,解释详见MDN
现在就是对齐的了: