当前位置: 首页 > news >正文

element ui el-table表格纵向横向滚动条去除并隐藏空白占位列

需求

当table内容列过多时,可通过height属性设置table高度以固定table高度、固定表头,使table内容可以滚动
在这里插入图片描述

现在需求是右侧滚动条不好看,需要去除滚动条并隐藏滚动条所占列的位置

// ----------修改elementui表格的默认样式-----------
.el-table__body-wrapper {&::-webkit-scrollbar { // 整个滚动条width: 0; // 纵向滚动条的宽度background: rgba(213,215,220,0.3);border: none;}&::-webkit-scrollbar-track { // 滚动条轨道border: none;}
}// --------------------隐藏table gutter列和内容区右侧的空白
.el-table th.gutter{display: none;width:0
}
.el-table colgroup col[name='gutter']{display: none;width: 0;
}.el-table__body{width: 100% !important;
}

效果

在这里插入图片描述

http://www.lryc.cn/news/212932.html

相关文章:

  • 防止python进程重复执行
  • LV.12 D13 C工程与寄存器封装 学习笔记
  • Java SE 学习笔记(十九)—— XML、设计模式
  • grafana InfluxDB returned error: error reading influxDB 400错误解决
  • 【LeetCode:150. 逆波兰表达式求值 | 栈】
  • 什么是神经网络,它的原理是啥?(2)
  • leetcode做题笔记206. 反转链表
  • 2023/10/31 JAVA学习
  • SurfaceFliger绘制流程
  • 系统架构设计师-第14章-云原生架构设计理论与实践-
  • conda 实践
  • 行业追踪,2023-10-31
  • springboot 配置多个Redis数据源详解
  • 【数据结构】排序算法总结
  • 作为20年老程序员,我如何使用GPT4来帮我写代码
  • 【机器学习合集】模型设计之残差网络 ->(个人学习记录笔记)
  • GoLong的学习之路(十六)基础工具之Gin框架
  • VMware打开centos黑屏解决方法汇总
  • 5G物联网关相较有线网关有哪些独特优势
  • 【数据结构】顺序表的学习
  • 在NISQ小型计算机上执行大型并行量子计算的可能性
  • 考虑时空相关性的风电功率预测误差MATLAB代码
  • ASP.NET WebApi 极简依赖注入
  • 解决proteus仿真stm32,IIC通讯,IIC DEBUG无法显示从机应答信号的问题(问题情况为在8位数据后应答位显示?)
  • PHP判断闰年
  • 证照之星XE专业版下载专业证件照制作工具
  • VR全景图片如何制作?揭秘VR全景图片制作全流程
  • vue element el-table-column 循环示例代码
  • R语言生物群落(生态)数据统计分析与绘图实践技术应用
  • 有了 GPT,还需要付费咨询吗?