ElementUI el-table 表头错位的解决方案

问题：当el-table固定表头且出现滚动条时，会出现表头错位。

解决：先上CSS

.el-table {
    th.gutter, colgroup.gutter {
        width: 5px !important;//此处的宽度值，对应你自定义滚动条的宽度即可
    }
}


// 关键css代码
.el-table__header colgroup col[name="gutter"] {
    display: table-cell !important;
}

拙见：

当el-table固定表头且出现滚动条时，el-table自动生成的数据，

会由：<th class="gutter" style="width: 0px; display: none;"></th>

变成：<th class="gutter" style="width: 17px;"></th>

而我们又自定义了滚动条，滚动条的宽度缩小，但是自动生成的“gutter”的宽度并没有发生改变，所以这时表头会统一向左发生错位，因为 class="gutter" 的th占位，挤掉了空间。

因此我们需要按以上方式特别处理一下 “gutter” 的宽度。

特别说明：

        本人并没有深入研究 el-table 的生成方式，仅仅是个人怀疑，el-table 会出现以上问题，应该是在创建原生 table 时做了一些特别的处理。但是呢，又没有兼容自定义滚动条的这种情况，因此需要手动处理一下相关表头的样式了。