elementUI——el-table组件滚动条的宽度设置—

今天在看后台管理系统时，领导发现表格中的横向和纵向的滚动条宽度不一致，导致页面看上去很不协调：

如下：

根据上图效果：会发现：横向滚动条的高度与纵向滚动条的宽度不一致：

修改页面滚动条的宽高可以通过如下的css样式来处理：

::-webkit-scrollbar {width: 7px;height: 7px;background-color: transparent;
}

只要将上面css中的width和height设置成一个数值，就可以保证横向滚动条的高度与纵向滚动条的宽度保持一致了。

完成！！！

elementUI——el-table组件滚动条的宽度设置——css基础相关推荐

设置elementUI的table组件滚动条位置
1.设置table的ref为tableList 2.设置滚动至顶部 this.$refs.tableList.bodyWrapper.scrollTop =0; 3.设置滚动至底部 this.$ref ...
解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题
解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题参考文章: (1)解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题 (2)http ...
在 Element-UI 的 Table 组件上添加列拖拽效果
在 Element-UI 的 Table 组件上添加列拖拽效果一.数据驱动传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup 事件来修改删减 dom 节点但 V ...
vue 带全选和多选的表格怎么写_vue+element-ui里面table组件多选框实现批量操作
vue+element-ui里面table组件多选框实现批量操作有时候人不是被困难难倒的,是被自己蠢哭的...官方文档用到某个地方的时候,才感觉对这个方面的理解才会加深一点,还是要记录一下这个地方! ...
ui做成html格式,使用element-ui的table组件时，渲染为html格式
背景今天在作vue的项目时,使用到 element-ui 的 table 组件,使用富文本编辑器进行新增操做后,发现 html格式并无被识别 html 缘由在 element-ui 中,tabl ...
原生html使用element组件,使用element-ui的table组件时，渲染为html格式
背景今天在做vue的项目时,使用到 element-ui 的 table 组件,使用富文本编辑器进行新增操作后,发现 html格式并没有被识别原因在 element-ui 中,table组件默 ...
Element ui table组件滚动条隐藏与样式修改
Element ui 虽然用起来方便,但是调整就比较麻烦了,尤其是这个table组件,一旦设定了height属性,数据多的时候就会自动出现滚动条,如果你改了其他的样式,这个滚动条就是十分难看,可以用下 ...
Vue使用ElementUI的Table组件表头与内容不对齐问题
问题描述:用ElementUI开发后台,使用Table组件时,表头与内容不对齐解决方法: 在App.vue组件中添加如下代码: <style> .el-table th.gutter { ...
如何使用ElementUI的table组件来实现单元格的行合并
前言最近在编写一个值班的排班表,然后中间涉及到了表格应用.并且还要做出类似这种效果的行合并效果: 然后就开始找组件了.Html的table是有rowsSpan和colsSpan的属性来实现行合并和列 ...

elementUI——el-table组件滚动条的宽度设置——css基础

elementUI——el-table组件滚动条的宽度设置——css基础相关推荐

最新文章

热门文章