Element: [Bug Report] el-table column misalignment on safari

[fengyun2]

Element UI version

2.2.0

OS/Browsers version

Mac OXS / safari

Detail:
iMac (Retina 4K, 21.5-inch, Late 2015)
Intel Iris Pro Graphics 6200 1536 MB

Vue version

2.5.10

Reproduction Link

https://jsfiddle.net/0wnt3tou/

Steps to reproduce

设置 css内容为

@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");
#app .el-table .el-table__body td .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

What is Expected?

表头与表内容表内容列对齐，并且设置了 show-overflow-tooltip 的单元格超出的内容以省略号显示。

What is actually happening?

表头与表内容表内容列没有对齐，并且设置了 show-overflow-tooltip 的单元格当内容过长没有被隐藏。

[element-bot]

Translation of this issue:

Element UI version

2.2.0

OS/Browsers version

Mac OXS / Safari

Vue version

2.5.10

Reproduction Link

https://jsfiddle.net/0wnt3tou/

Steps to reproduce

Set the CSS content for

```css
@import URL ("//unpkg.com/element-ui/lib/theme-chalk/index.css");

app.El-table.El-table__body TD.Cell {

Overflow: hidden;

Text-overflow: ellipsis;
White-space: nowrap;

}
.

What is Expected?

Table of contents table header and content columns aligned, and set up the show-overflow-tooltip cell beyond content to an ellipsis.

What is actually happening?

The header is not aligned with the table content table content column, and the show-overflow-tooltip cell is set when the content is too long to be hidden.

[Leopoldthecoder]

并且设置了 show-overflow-tooltip 的单元格当内容过长没有被隐藏

例子中只有第二列设置了 show-overflow-tooltip ，你这里说的没有被隐藏指的是哪几列？

[fengyun2]

@Leopoldthecoder 所有列（只要内容超出了自动分配的宽度）。
并且设置了

#app .el-table .el-table__body td .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[Leopoldthecoder]

暂时没有机会在 4k 显示器上测试，先打上标签。

[wacky6]

我在mbp safari上测试一样有问题。应该不是4k屏的问题。标题我改了一下

[Leopoldthecoder]

还没细看，不过加个 max-width 就好了：https://jsfiddle.net/0wnt3tou/19/

[fengyun2]

但是如果设置了 max-width 之后(因为每一列的内容都不确定长度)，用27寸的屏幕打开，又铺不满一整屏。

[wacky6]

先用 media-query hack 一下？

[zhouyanggodking]

我最近也遇到了，只要设置了当文本超长只显示三个点时，就会出现这个问题。只在safari上有这个问题，我测试了chrome ，edge，firefox都没有问题。搞了好久都没解决，希望大神能帮忙啊，小弟在此谢过

[LucasZheng]

safari上表头与表内容列没有对齐这个有解决方案没呀？

[dborstelmann]

I am still getting this as well. Does anyone have a solve?

[vgavro]

If anybody needs hotfix.

import { Table as ElTable } from 'element-ui'
export default {
  extends: ElTable,
  methods: {
    doLayout (...args) {
      ElTable.methods.doLayout.call(this, ...args)
      this.fixLayout() // Looks like we can do it once?
    },

    fixLayout () {
      // Safari header/content misalign fix (possible other browsers?)
      this.columns.forEach(c => {
        // element-ui/packages/table/src/layout-observer.js:49
        const width = c.realWidth || c.width
        const th = this.$el.querySelector(`table.el-table__header th.${c.id}`)
        if (th) {
          if (th.offsetWidth !== width) {
            th.style = `min-width: ${width}px; max-width: ${width}px;`
          }
          let td
          for (td of this.$el.querySelectorAll(`table.el-table__body td.${c.id}`)) {
            if (td.offsetWidth === width) break
            td.style = `min-width: ${width}px; max-width: ${width}px;`
          }
        }
      })
    },
}

[Ttou]

希望官方解决下

[smile33]

遇到同样的问题，safari只要表格内用到省略(overflow: hidden; text-overflow: ellipsis;white-space: nowrap; )就会出现问题，内容不会被省略而是被撑开导致无法对齐表头。其他浏览器都正常，希望官方尽快解决下

[raybon-lee]

还没细看，不过加个 max-width 就好了：https://jsfiddle.net/0wnt3tou/19/

貌似并没有那么简单，如果cell 是操作列，会有遮挡的问题

[khylias]

Any update about this issue ? Still open and it's very messy on Safari.

[vh13294]

It's only happened when you use template in column.

Possibly some css targeting is lost on the way on sub-level.

<el-table-column>
        <template slot-scope="scope">
        </template>
</el-table-column>

[smarttang]

这个问题一直没解决啊。。。怎么搞？

[raybon-lee]

被这个问题困惑了好久，需要 之前调用 table 的update 方法都没能改变这个浏览器下的自适应宽度

[ray007]

I guess it's too much to hope for Apple to fix their browser, so we'll need to fix the layout on every size change anywhere ourselves?

Edit: I'm also missing horizontal scrolling, anything I can do for that?

[ray007]

Starting with the code in the comment above (https://github.com/ElemeFE/element/issues/10308#issuecomment-415175333), I came up with a new version of the fixLayout method which does not suffer the performance penalties with many rows and also works with fixed columns and when new rows are added:

fixLayout() {
    var csTag = this.__cst;
    if (!csTag) {
        csTag = this.__cst = document.createElement('style');
        this.$el.appendChild(csTag);
    }
    var colStyles = this.columns.map((c) => {
        // element-ui/packages/table/src/layout-observer.js:49
        const width = c.realWidth || c.width || c.minWidth;
        // `table.el-table__header th.${c.id}, table.el-table__body td.${c.id} { STYLES }`
        return `th.${c.id}, td.${c.id} { min-width: ${width}px; max-width: ${width}px }`;
    });
    csTag.textContent = colStyles.join('\n');
}

Still testing, but seems to work quite fine so far.

And still wondering what the safari devs must be smoking...

[renmingliang]

经查验，当width与show-overflow-tooltip同时存在时，el-tooltip未正确设置width行内样式，主流浏览器均存在该情况，而Safari不兼容col列设置的宽度，内容过长时，会导致撑开列宽；

两种解决办法：

1.源码（建议官方修复）
文件修改所在：packages/table/src/table-body.js
````javascript
getColspanRealWidth(columns, colspan, index) {
if (colspan < 1) {
return columns[index].realWidth;
}
const widthArr = columns.map(({ realWidth }) => realWidth).slice(index, index + colspan);

// (修改前)存在widthArr => null
// return widthArr.reduce((acc, width) => acc + width, -1);

// (修改后)过滤非法值 null
const validArr = widthArr.filter(item => item)
return validArr.length ? validArr.reduce((acc, width) => acc + width, -1) : null;

},
````

2.利用官方提供cell-style设置单元格样式
html <el-table :cell-style="getCellStyle"> ... </el-table>

````javascript

getCellStyle({ column }) {
// TODO 针对Safari表格width与showOverflowTooltip暂不能共存异常
const tempWidth = column.realWidth || column.width
if (column.showOverflowTooltip) {
return {
minWidth: tempWidth + 'px',
maxWidth: tempWidth + 'px'
}
}

return {}

}
````

[ymforever555]

经查验，当width与show-overflow-tooltip同时存在时，el-tooltip未正确设置width行内样式，主流浏览器均存在该情况，而Safari不兼容col列设置的宽度，内容过长时，会导致撑开列宽；

两种解决办法：

1.源码（建议官方修复）
文件修改所在：packages/table/src/table-body.js

  getColspanRealWidth(columns, colspan, index) {
    if (colspan < 1) {
      return columns[index].realWidth;
    }
    const widthArr = columns.map(({ realWidth }) => realWidth).slice(index, index + colspan);

    // (修改前)存在widthArr => null
    // return widthArr.reduce((acc, width) => acc + width, -1);

    // (修改后)过滤非法值 null
    const validArr = widthArr.filter(item => item)
    return validArr.length ? validArr.reduce((acc, width) => acc + width, -1) : null;
  },

2.利用官方提供cell-style设置单元格样式

  <el-table :cell-style="getCellStyle">
    ...
  </el-table>

  getCellStyle({ column }) {
    // TODO 针对Safari表格width与showOverflowTooltip暂不能共存异常
    const tempWidth = column.realWidth || column.width
    if (column.showOverflowTooltip) {
      return {
        minWidth: tempWidth + 'px',
        maxWidth: tempWidth + 'px'
      }
    }

    return {}
  }

你好，试了第一种方法，改了源码，还是老样子。还需要改别的东西吗

[renmingliang]

@ymforever555 不需要，下载element仓库代码至本地，修改指定文件代码后，启动服务可以查看效果

[ray007]

Maybe this works well enough when changing the table source code, but settings minWidth and maxWidth from outside was a bad performance hit on large tables when I tested it here. And I also had troubles on column resize, but that also may not be a problem in your case.
Maintaining a style tag (as I shared above) works quite fine for me.

[renmingliang]

I agree with u. The right one is the best.
I also hope The official changing the table source code soon.