2023年6月20日发(作者：)

element-uiTable表格⾃定义滚动条样式踩坑及解决⽅案（设置fixed时表格对不齐）问题描述element-ui Table 表格⾃定义滚动条样式踩坑 ：当表格 设置 fixed 并且 设置 了⾃定义 滚动条时 表格 横向和纵向 都会对不齐。1.给 表格设置 ⾃定义滚动条：.el-table__body-wrapper::-webkit-scrollbar { width: 30px;

height: 30px;

}

.el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #dddee0; border-radius: 8px; }看下图：明显右边 表格出现了错位 对不齐现象

解决⽅案:加上 .el-scrollbar__wrap::-webkit-scrollba 并且 width,height 和.el-table__body-wrapper::-webkit-scrollbar 保持⼀致 。代码如下：.el-table__body-wrapper::-webkit-scrollbar { width: 30px;

height: 30px;

}

.el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #dddee0; border-radius: 8px; }/*主要是靠这个 注意

上⾯.el-table__body-wrapper::-webkit-scrollbar 是 30px 下⾯这个也要 30px*/.el-scrollbar__wrap::-webkit-scrollbar{ width: 30px;

height: 30px;}总结与思考: 有些 问题 是不得不看源码 才能解决 。实际上 antd-table也存在这个 问题，遇到的时候不妨，也从这个 思路尝试着解决⼀下。

2023年6月20日发(作者：)

element-uiTable表格⾃定义滚动条样式踩坑及解决⽅案（设置fixed时表格对不齐）问题描述element-ui Table 表格⾃定义滚动条样式踩坑 ：当表格 设置 fixed 并且 设置 了⾃定义 滚动条时 表格 横向和纵向 都会对不齐。1.给 表格设置 ⾃定义滚动条：.el-table__body-wrapper::-webkit-scrollbar { width: 30px;

height: 30px;

}

.el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #dddee0; border-radius: 8px; }看下图：明显右边 表格出现了错位 对不齐现象

解决⽅案:加上 .el-scrollbar__wrap::-webkit-scrollba 并且 width,height 和.el-table__body-wrapper::-webkit-scrollbar 保持⼀致 。代码如下：.el-table__body-wrapper::-webkit-scrollbar { width: 30px;

height: 30px;

}

.el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #dddee0; border-radius: 8px; }/*主要是靠这个 注意

上⾯.el-table__body-wrapper::-webkit-scrollbar 是 30px 下⾯这个也要 30px*/.el-scrollbar__wrap::-webkit-scrollbar{ width: 30px;

height: 30px;}总结与思考: 有些 问题 是不得不看源码 才能解决 。实际上 antd-table也存在这个 问题，遇到的时候不妨，也从这个 思路尝试着解决⼀下。