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 !i
·
问题:当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 时做了一些特别的处理。但是呢,又没有兼容自定义滚动条的这种情况,因此需要手动处理一下相关表头的样式了。
更多推荐
已为社区贡献4条内容
所有评论(0)