Angular-Win10系统-Chrome浏览器-NG-ZORRO-table组件-固定表头-表格明显错位解决办法

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

现在就是对齐的了：


效果
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容