在最新chrome中，在项目内修改滚动条宽度后，table表头与内容的列宽度不一致

[whorong]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.7.7

Environment

chrome: 121.0.6167.184（正式版本），vue2，ant-design-vue@1.7.8

Reproduction link

http://demo

Steps to reproduce

升级chrome版本至 121.0.6167.184（正式版本） (arm64)

1. 在项目内全局修改滚动条样式

/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0, 0, 0, 0.1);
}

2. 使用table组件，使用表头固定，内容上下滚动

<a-Table
:scroll="{ y: 200 }"
>
</a-Table>

3. 检查表头和列的元素发现 宽度不一致

What is expected?

表头宽度与内容宽度保持一致

What is actually happening?

表头宽度与内容宽度不一致

[xiawenI]

遇到相同的问题。。。

[whorong]

遇到相同的问题。。。

在全局修改这个就行了。
.ant-table-hide-scrollbar {
scrollbar-color: initial !important; // 谷歌新版浏览器中就是他导致body的美化生效了，header的没生效！淦！！，导致列错位
}

[xiawenI]

成功了！！！🎉🎉🎉 感谢！！！

[observerzy]

给每行固定高度也可以，比较方便，比如
/deep/ .ant-table-row{
height: 100px;
}

[1842729347]

兄弟姐妹们 解决了吗

[a4435351]

遇到相同的问题。。。

在全局修改这个就行了。 .ant-table-hide-scrollbar { scrollbar-color: initial !important; // 谷歌新版浏览器中就是他导致body的美化生效了，header的没生效！淦！！，导致列错位 }

解决了，兄弟厉害了。