Element: [Bug Report] Dynamic column with scroll bar, header misalignment

[czlh]

Element UI version

2.10.1

OS/Browsers version

windows10 chrome

Vue version

2.6.10

Reproduction Link

https://codepen.io/czlh/pen/gVRGPY

Steps to reproduce

打开链接就行，表头和表格内容错位，有滚动条时比较明显

What is Expected?

表头和表格对齐

What is actually happening?

表头和表格错位

[element-bot]

Translation of this issue:

Element UI version

2.10.1

OS/Browsers version

Windows 10 Chrome

Vue version

2.6.10

Reproduction Link

Https://codepen.io/czlh/pen/gVRGPY

Steps to reproduce

Open the link, the header and the content of the table are out of place, which is more obvious when there is a scroll bar.

What is Expected?

Header alignment with table

What is actually happening?

Header and table misalignment

[czlh]

[luochen97]

我也遇到了，应该是新版本与老版本不兼容，同样求解

[luochen97]

我也遇到过这个问题：
1.页面一进来表格会错位，和表格的gutter的display应该为none
2.有横向滚动条的，滚动滚动条也会错位，仔细对比下来是th.gutter的宽度渲染为0px，导致表头宽度比表身宽度大17px导致
3.切换时，表格也会错位，固定列会下移

[xrkffgg]

😂😂😂 为啥我看不到

[czlh]

😂😂😂 为啥我看不到

要不试试跟我一样的分辨率配置
缩放与布局125%我这里会出现此问题，换成100%就看不到了

[jesse-li]

同样的问题，2.10，看了下代码应该是数据加载完后，出现了滚动条，table没有执行更新操作，导致head和body的可滚动距离不一致。大家可以在数据加载后手动调下doLayout救下急。

[czlh]

同样的问题，2.10，看了下代码应该是数据加载完后，出现了滚动条，table没有执行更新操作，导致head和body的可滚动距离不一致。大家可以在数据加载后手动调下doLayout救下急。

created(){
this.$nextTick(()=>{
this.$refs.table.doLayout()
})
}加了这段，好像没什么效果

[novbing]

同样的问题，2.10，看了下代码应该是数据加载完后，出现了滚动条，table没有执行更新操作，导致head和body的可滚动距离不一致。大家可以在数据加载后手动调下doLayout救下急。

实测可行

[fh345392977]

原来还有doLayout这种骚操作

[ziyoung]

无法复现。

[luckyCao]

Sorry, we have no plan to fix this.

[ziyoung]

我也遇到过这个问题：
1.页面一进来表格会错位，和表格的gutter的display应该为none
2.有横向滚动条的，滚动滚动条也会错位，仔细对比下来是th.gutter的宽度渲染为0px，导致表头宽度比表身宽度大17px导致
3.切换时，表格也会错位，固定列会下移

@luochen97 #17341 pr 修复了该问题。