elementUI——el-table组件滚动条的宽度设置
场景
今天在看后台管理系统时,领导发现表格中的横向和纵向的滚动条宽度不一致,导致页面看上去很不协调:
如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/dc50e69aa153777f73456d1056c2a697.png)
根据上图效果:会发现:横向滚动条的高度与纵向滚动条的宽度不一致:
修改页面滚动条的宽高可以通过如下的css
样式来处理:
::-webkit-scrollbar {
width: 7px;
height: 7px;
background-color: transparent;
}
只要将上面css
中的width
和height
设置成一个数值,就可以保证横向滚动条的高度与纵向滚动条的宽度保持一致了。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7c1fb33fc73d78687d7a22b68edf441e.png)
完成!!!