el-table表格做滚动条样式处理
vue项目中引入Element-UI并对其el-table表格做滚动条样式处理
需求分析:
主要是对table表格中的body内容做滚动处理,表头样式不做变化。初调时X轴和Y轴都做了overflow:auto滚动设置。结果当X轴右滑动后会出现表头和表格内容对不齐的问题。经测试发现是Y轴滚动条宽度占用了表格内容的宽度。所以问题的核心还是如何使XY轴滚动且X轴显示滚动条,而Y轴隐藏滚动条。
调试过程方法测试
方案一:利用父级标签隐藏子级滚动条的思路:由于针对el-table标签中的body做处理,如果在再外层追加父级标签。不仅增加了代码的难度而且容易破坏Element-UI定义的标签结构。可能会引起其他意外的异常。故排除此方法
方案二: 利用overflow-y:hidden设置Y轴滚动条隐藏导致滚动条无法滚动也不符合需求
方案三: 在调试过程中查找了一下,在Google浏览器中可以单独设置XY轴的宽度和高度,自此思路就是XY轴均设置overflow:auto,但可以把X轴有高度,而Y轴的宽度设置为0。则可以实现“隐藏”Y轴宽度的需求
样式代码
.el-table{height: calc(100% - 35px);.el-table__body-wrapper{overflow: auto;height: calc(100% - 85px);&::-webkit-scrollbar {width: 0px; /* 纵向滚动条 宽度 */ height: 8px; /* 横向滚动条 高度 */// display: none;}::-webkit-scrollbar-button{width: 10px; /* 横向滚动条 宽度 */height: 0px; /* 纵向滚动条 高度 */border-radius: 10px;}/* Track */&::-webkit-scrollbar-track {background: rgba(0, 0, 0, 0.2);border-radius: 8px;width: 8px;}/* Handle */&::-webkit-scrollbar-thumb {background: rgba(113,147,214,1);border-radius: 8px;}}.cell.el-tooltip{text-align: center;}}
注:当前样式只针对Google浏览器,由于其他的浏览器的滚动条样式不一样或根本没有滚动条样式,所以不做赘述。如果要做Firefox或IE的兼容,则建议使用方案一这样样式更灵活,兼容性更好
el-table表格做滚动条样式处理相关推荐
- table表格加滚动条
<HTML><HEAD><TITLE>table表格加滚动条</TITLE> <META http-equiv=Content-Type cont ...
- 修改elementui的表格的滚动条样式
// 表格的滚动条样式.el-table__body-wrapper::-webkit-scrollbar {width: 10px; // 横向滚动条height: 235px; // 纵向滚动条 ...
- 基于HTTP浏览器缓存机制全面解析看Table表格的css样式代码详解
文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 漂亮的table表格样式 ...
- Element Table 表格 设置滚动条以及修改边框颜色
本文中使用element UI表格,需求是给表格设置滚动条.查找了一些方法,包括查找插件解决效果都达不到要求.特此写下此文,便于日后使用和学习交流. 一.需要实现的效果图 二.直接上代码 app是是挂 ...
- 在PHP中给表格加上css样式,表格CSS样式设置 给table表格设置CSS样式表
表格table tr td CSS花色设置 给table表格设置CSS花式表 在一个网页中多处运用了表格table标签,这个时候给指定的表格对象设置装备摆设款式仿照照旧概略经由CSS发展管束配置. 着 ...
- table表格做一个表头斜线样式
具体代码实现如下: <!doctype html> <html lang="en"> <head><meta charset=" ...
- html table表格设置滚动条
table对tbody进行设置使其能够进行滚动. 示例一: 效果如下: 代码如下: <!DOCTYPE HTML> <html> <head><meta ht ...
- ng-zorro table怎么更改滚动条样式
没改完之前是: 修改效果图如下: 代码如下: :host ::ng-deep .ng-star-inserted::-webkit-scrollbar{width:5px; height:1px; } ...
- el-table滚动条样式修改
我们知道,el-table滚动条样式默认取的好像是我们全局滚动条的样式,当我们修改了全局滚动条的样式后,table表格的滚动条样式也随之而变. 比如,当我们修改了全局滚动条的样式,使其变得窄一点 // ...
最新文章
- 82年 AI程序员征婚启示火了!年薪百万,女生神回复
- leetcode 43. 字符串相乘(Multiply Strings)
- Apache Kafka:下一代分布式消息系统
- 螺钉装弹垫平垫机器人_一种批量组装螺钉、弹垫、平垫的工装及使用方法_2
- 最新临床肿瘤学文献精选(2021.12.5-2021.12.11)
- 将Maven项目发布到Nexus私服
- tf.keras.layers.Permute
- 前魅族副总裁李楠上手魅族17:颜值提升了
- Linux 引入自动化测试平台 KernelC
- 酒业头条信息流投放评估
- stm32关于can线的双机通信实验
- 区块链专家洪蜀宁:实现全民普惠的专业化产品设计 | 11月24日【区块链技术与实践】论坛...
- Mac 软件和学习经验分享
- java窗体图片_JAVA窗体添加背景图片
- 快速搭建 Node.js 开发环境以及加速 npm
- html透明玻璃效果,ps制作逼真的透明玻璃特效效果
- linux 6 dns,RHEL6下搭建DNS服务器
- Android 一分钟快速使用极光推送
- 编译链接实战(12)crt1.o, crti.o, crtbegin.o, crtend.o, crtn.o是什么东西
- python调用golang dataframe_用Python获取摄像头并实时控制人脸
热门文章
- python名片管理代码_学习python模拟的名片管理系统代码优化
- 比米饭好消化,比面条更营养,补铁又补锌,快手辅食第一名!
- PyQt5快速开发与实战 4.5 按钮类控件 and 4.6 QComboBox(下拉列表框)
- linux 嵌入式挂载sd卡
- HDU4752 Polygon
- 计算机黑屏如何重启,电脑重启黑屏怎么办 电脑重启后黑屏的解决方法
- 看了“QQ概念视频(触摸版)”,感受到了WPF的力量
- ios集成语音朗读功能
- 计算机vf知识点总结,计算机二级VF复习笔记
- HJ41 称砝码 ——华为机试练习题