element-ui Table 表格自定义滚动条样式踩坑及解决方案（设置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 注释掉就可以 复现了。kelement-ui Table 表格自定义滚动条样式踩坑及解决方案（设置fixed时表格对不齐）--在线运行https://codepen.io/guyu521/pen/jOGwxmohttps://codepen.io/guyu521/pen/jOGwxmohttps://codepen.io/guyu521/pen/jOGwxmo

 解决方案:

加上 .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;
}

  这个问题 是我无意间 刷dou音 看到的觉得 解决的思路 很新颖，给了我 启发开拓了我的思路。所以决定 亲自试试，经过验证 确实 有用。https://v.douyin.com/8JgQgqT/  el-table 错位 问题 视频 讲解 及 解决思路https://v.douyin.com/8JgQgqT/ https://v.douyin.com/8JgQgqT/%C2%A0

总结与思考:

 有些 问题 是不得不看源码 才能解决 。实际上 antd-table也存在这个 问题，遇到的时候不妨，也从这个 思路尝试着解决一下。