在最新chrome中，table行错位

[sunny19990108]

trafficstars

行错位图片：

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

Version

1.7.8 及以下

Environment

chrome: 121.0.6167.184（正式版本） (arm64) Vue2

Reproduction link

https://1x.antdv.com/components/table-cn/#components-table-demo-fixed-header

Steps to reproduce

升级chrome版本至 121.0.6167.184（正式版本） (arm64)，发现table行错位，官方文档demo 中也有同样的问题 demo1、 https://1x.antdv.com/components/table-cn/#components-table-demo-fixed-columns-and-header demo2、 https://1x.antdv.com/components/table-cn/#components-table-demo-grouping-table-head

在渲染正常的表格中，有一些style样式（safari浏览器） d 但是行错位的情况下，缺少了这部分样式（chrome: 121.0.6167.184（正式版本） (arm64)） 图片在下面评论区

What is expected?

表格渲染正常

What is actually happening?

行错位

[sunny19990108]

但是行错位的情况下，缺少了这部分样式（chrome: 121.0.6167.184（正式版本） (arm64)）

[orionna319]

你好，上面问题解决了吗，我这边也发现了。。。

[qppq54s]

我发现是滚动条导致的 改动这个地方可以修复。 .ant-table-fixed-header .ant-table-scroll .ant-table-header { overflow: auto; } 如果是需要滚动条的话，要根据情况修改对应的margin-bottom .ant-table-fixed-header .ant-table-scroll .ant-table-header { margin-bottom: -36px; overflow: auto; }

[orionna319]

.ant-table-fixed-header .ant-table-scroll .ant-table-header {
  margin-bottom: -36px;
}

.ant-table-fixed-header .ant-table-scroll .ant-table-header {
  overflow: hidden;
}

是的，以上这两种都可以，就是问题比较奇怪，之前都是好的，不知道是什么原因导致的。

我发现是滚动条导致的 改动这个地方可以修复。 .ant-table-fixed-header .ant-table-scroll .ant-table-header { overflow: auto; } 如果是需要滚动条的话，要根据情况修改对应的margin-bottom .ant-table-fixed-header .ant-table-scroll .ant-table-header { margin-bottom: -36px; overflow: auto; }

[qppq54s]

应该更新的这个 scrollbar-width 属性默认auto导致的原因。修改为thin或者none都可以解决。

[Cirzear]

应该更新的这个 `scrollbar-width` 属性默认auto导致的原因。修改为thin或者none都可以解决。

我是chrome 浏览器里 表头下面多出来一截，edge里没问题，改了这个属性可以兼容了，赞！

[haoyanming]

应该更新的这个 `scrollbar-width` 属性默认auto导致的原因。修改为thin或者none都可以解决。

我是chrome 浏览器里 表头下面多出来一截，edge里没问题，改了这个属性可以兼容了，赞！

大哥，用这个没遇到兼容问题吗。 macOS和windows的chrome浏览器

[Cirzear]

应该更新的这个 `scrollbar-width` 属性默认auto导致的原因。修改为thin或者none都可以解决。

我是chrome 浏览器里 表头下面多出来一截，edge里没问题，改了这个属性可以兼容了，赞！

大哥，用这个没遇到兼容问题吗。 macOS和windows的chrome浏览器 抱歉，我这手头没苹果设备，没法看。 不过后来发现是我的 edge 的版本太旧，更新后跟 chrome 一样的问题。 而且我这边用了 scrollbar-width 后还有点问题： 表头左右滑动对不齐，最后还是放弃了，使用自己写的 imporant 样式强制修改了 ==。

.ant-table-hide-scrollbar {
  margin-bottom: 0 !important;
  overflow: hidden !important;
  padding-right: 4px;
}

[zjjjjjjjjjjd]

应该更新的这个 `scrollbar-width` 属性默认auto导致的原因。修改为thin或者none都可以解决。

我是chrome 浏览器里 表头下面多出来一截，edge里没问题，改了这个属性可以兼容了，赞！

大哥，用这个没遇到兼容问题吗。 macOS和windows的chrome浏览器 抱歉，我这手头没苹果设备，没法看。 不过后来发现是我的 edge 的版本太旧，更新后跟 chrome 一样的问题。 而且我这边用了 scrollbar-width 后还有点问题： 表头左右滑动对不齐，最后还是放弃了，使用自己写的 imporant 样式强制修改了 ==。

.ant-table-hide-scrollbar {
  margin-bottom: 0 !important;
  overflow: hidden !important;
  padding-right: 4px;
}

根据大佬思路我这调成这样暂时没问题

.ant-table-hide-scrollbar {
        padding-right: 5px;
        overflow: hidden !important;
    }

[zjjjjjjjjjjd]

应该更新的这个 `scrollbar-width` 属性默认auto导致的原因。修改为thin或者none都可以解决。

我是chrome 浏览器里 表头下面多出来一截，edge里没问题，改了这个属性可以兼容了，赞！

大哥，用这个没遇到兼容问题吗。 macOS和windows的chrome浏览器 抱歉，我这手头没苹果设备，没法看。 不过后来发现是我的 edge 的版本太旧，更新后跟 chrome 一样的问题。 而且我这边用了 scrollbar-width 后还有点问题： 表头左右滑动对不齐，最后还是放弃了，使用自己写的 imporant 样式强制修改了 ==。

.ant-table-hide-scrollbar {
  margin-bottom: 0 !important;
  overflow: hidden !important;
  padding-right: 4px;
}

根据大佬思路我这调成这样暂时没问题

.ant-table-hide-scrollbar {
        padding-right: 5px;
        overflow: hidden !important;
    }

再次深入研究发现，其实这个和我们之前写的::-webkit-scrollbar起冲突了，导致body上的滚动条消失了，header缺没有消失，如果都存在滚动就不会有这个问题

[zjjjjjjjjjjd]

应该更新的这个 `scrollbar-width` 属性默认auto导致的原因。修改为thin或者none都可以解决。

我是chrome 浏览器里 表头下面多出来一截，edge里没问题，改了这个属性可以兼容了，赞！

大哥，用这个没遇到兼容问题吗。 macOS和windows的chrome浏览器 抱歉，我这手头没苹果设备，没法看。 不过后来发现是我的 edge 的版本太旧，更新后跟 chrome 一样的问题。 而且我这边用了 scrollbar-width 后还有点问题： 表头左右滑动对不齐，最后还是放弃了，使用自己写的 imporant 样式强制修改了 ==。

.ant-table-hide-scrollbar {
  margin-bottom: 0 !important;
  overflow: hidden !important;
  padding-right: 4px;
}

根据大佬思路我这调成这样暂时没问题

.ant-table-hide-scrollbar {
        padding-right: 5px;
        overflow: hidden !important;
    }

再次深入研究发现，其实这个和我们之前写的::-webkit-scrollbar起冲突了，导致body上的滚动条消失了，header缺没有消失，如果都存在滚动就不会有这个问题

终极配置，如果你使用了::-webkit-scrollbar不想去掉chrome上独占的美化，那么全局加上

    .ant-table-hide-scrollbar {
        scrollbar-color: initial !important; // 就是他导致body的美化生效了，header的没生效！淦！！
    }

[zjjjjjjjjjjd]

应该更新的这个 `scrollbar-width` 属性默认auto导致的原因。修改为thin或者none都可以解决。

我是chrome 浏览器里 表头下面多出来一截，edge里没问题，改了这个属性可以兼容了，赞！

大哥，用这个没遇到兼容问题吗。 macOS和windows的chrome浏览器 抱歉，我这手头没苹果设备，没法看。 不过后来发现是我的 edge 的版本太旧，更新后跟 chrome 一样的问题。 而且我这边用了 scrollbar-width 后还有点问题： 表头左右滑动对不齐，最后还是放弃了，使用自己写的 imporant 样式强制修改了 ==。

.ant-table-hide-scrollbar {
  margin-bottom: 0 !important;
  overflow: hidden !important;
  padding-right: 4px;
}

根据大佬思路我这调成这样暂时没问题

.ant-table-hide-scrollbar {
        padding-right: 5px;
        overflow: hidden !important;
    }

再次深入研究发现，其实这个和我们之前写的::-webkit-scrollbar起冲突了，导致body上的滚动条消失了，header缺没有消失，如果都存在滚动就不会有这个问题

终极配置，如果你使用了::-webkit-scrollbar不想去掉chrome上独占的美化，那么全局加上

    .ant-table-hide-scrollbar {
        scrollbar-color: initial !important; // 就是他导致body的美化生效了，header的没生效！淦！！
    }

盲猜新版chrome匹配到 scrollbar-color 这类正规属性时会忽略那种实验配置

[whorong]

@qppq54s 请问下 我设置了 .ant-table-content { .ant-table-scroll { .ant-table-header { scrollbar-width: thin !important; } } } 但是好像并没有效果，检查元素的时候发现 ant-table-header的滚动条还是按17px计算的，但是我项目里面是已经把滚动条样式改为了6px。这该怎么解决呢？

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days