Element: When [Bug Report] browsers are zoomed, the table header and data part will be misplaced.

Created on 6 Jun 2018  ·  14Comments  ·  Source: ElemeFE/element

Element UI version

0.1.0

OS/Browsers version

windows/chrome 65.0.3325.181

Vue version

2.5.17-beta.0

Reproduction Link

https://jsfiddle.net/z9c6x1qu/56/

Steps to reproduce

浏览器页面缩小为90%
表格单元格错位,边框不对齐了。

What is Expected?

缩放不影响表格布局。

What is actually happening?

浏览器缩小为90%,边框错位不对齐了。
2.0.11版本及以前没有该问题。
升级到2.2.0时出现了该问题。

Most helpful comment

.el-table__header colgroup col[name=gutter] {
    display: none;
}

All 14 comments

Translation of this issue:

Element UI version
0.1.0

OS/Browsers version
Windows/chrome 65.0.3325.181

Vue version
2.5.17-beta.0

Reproduction Link
https://jsfiddle.net/z9c6x1qu/56/

Steps to reproduce
The browser page is reduced to 90%

The table cell is misplaced and the border is not aligned.
What is Expected?

Scaling does not affect the layout of the table.
What is actually happening?

The browser is reduced to 90%, and the border misalignment is not aligned.
The 2.0.11 version has not been the problem before.

The problem appeared when upgrading to 2.2.0.

table
对比了原来的布局,好像是表头和合计行没有同步缩放。

I met this problem too, but when you set a fixed width to each column, this problem disappeared. But I need the columns to expand automatically.

@AprilXtt 解决了吗? 遇到同样问题 同时与@rookiebulls的描述一致,设置固定宽度bug消失,但是我也需要自动适应啊...

官网放大到1.1时, 感觉是排序时没有处理好?
cuow

@Glenfiddish 这个问题依旧存在,但是不想设置fixed,因为列太多了,这里有实例代码,麻烦官方跟踪一下这个问题,https://jsfiddle.net/laihuanmin/9twqeLh1/12/

@AprilXtt @rookiebulls @loyalforyou 我找到解决方案的issue了,参考https://github.com/ElemeFE/element/issues/11019 这个地址,issue作者使用了这个workaround的方式:

mounted() {
$("colgroup").find('col[name=gutter]').css('display', 'none');
}

不过这是暂时的方案。。。虽然不太优雅,但是管用啊 :doge

@LaiHuanMin 使用min-whidth时候会出现错位问题。固定宽度时候没问题。
好吧 暂时 使用这个吧,this.$refs.table.$el.querySelector('col[name=gutter]').style.display = 'none'

我们产品也说这个了,真是什么都能搞到,我们的目的就是满足产品

.el-table__header colgroup col[name=gutter] {
    display: none;
}

该功能不支持。

关于这个表格的边框还有另一个问题:当用户的屏幕为高分屏,且使用系统推荐的缩放比例(比如125%),则表格头部的下边框会消失。

关于这个表格的边框还有另一个问题:当用户的屏幕为高分屏,并且使用系统推荐的缩放比例(尺寸125%),则表格标题的下边框会消失。

也遇到这个问题了,而且不是全部消失

Was this page helpful?
0 / 5 - 0 ratings

Related issues

yorululu picture yorululu  ·  3Comments

fscardua picture fscardua  ·  3Comments

mochenxm picture mochenxm  ·  3Comments

dbskccc picture dbskccc  ·  3Comments

gengxuelei picture gengxuelei  ·  3Comments