当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__body{
width: 100% !important;
}
当el-table固定表头且出现滚动条时,el-table自动生成的数据,会由:
而我们又自定义了滚动条,滚动条的宽度缩小,但是自动生成的“gutter”的宽度并没有发生改变,所以这时表头会统一向左发生错位,因为class="gutter"的th占位,挤掉了空间。
因此我们需要按以上方式特别处理一下“gutter”的宽度。
补充一下table去滚动条,一起食用
//table 滚动条
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
/*width: 0;宽度为0隐藏*/
width: 0px;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 14px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
background: #c0c3ca;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
border-radius: 0;
background: none;
}