vue + element 中el-table 设置表头固定,固定高度出现空白

.DialogAirLineList-table {
.el-table .success-row {
color: #F2FF00 !important;
}
.el-table .warning-row {
color: #FFFFFF !important;
}
.el-table tr {
background: #031f36;
color: #fff;
height: 40px;
}
.el-table th.is-leaf,
.el-table td {
border-color: #00446B !important;
}
.el-table--border {
border: 1px solid #00446B !important;
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border: 1px solid #00446B !important;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
border: #00446B !important;
}
.el-table--border:after,
.el-table--group:after,
.el-table:before {
background-color: #00446B !important;
}
// 鼠标滑过背景色
.el-table__body tr:hover > td {
background-color: transparent !important;
}
.el-table__body tr.current-row > td {
background-color: transparent !important;
}
.el-table {
background: transparent;
}
.el-table th.gutter {
/*el-table加了gutter后 边框出现白边*/
display: table-cell !important;
}
// 隐藏table gutter列和内容区右侧的空白 start
.el-table th.gutter {
width: 18px !important;
background: transparent;
border-bottom: 1px solid #00446B !important;
}
.el-table colgroup col[name="gutter"] {
width: 18px !important;
background: transparent;
border-bottom: 1px solid #00446B !important;
}
.el-table__body-wrapper::-webkit-scrollbar {
width: 18px !important;
}
.el-button--text {
color: #21defe;
}
.deleteBtn:focus{
color: #21defe !important;
}
.saveBtn:focus{
color: #f2ff00 !important;
}
.el-table__row {
td:not(.is-hidden):last-child {
right: -1px !important;
}
}
// 修改elementui表格的默认样式-----------
.el-table__body-wrapper {
&::-webkit-scrollbar {
// 整个滚动条
width: 0 !important; // 纵向滚动条的宽度
background: rgba(213, 215, 220, 0.3);
border: none !important;
}
&::-webkit-scrollbar-track {
// 滚动条轨道
border: none !important;
}
}
//隐藏table gutter列和内容区右侧的空白 start
.el-table th.gutter {
display: none !important;
width: 0 !important;
}
.el-table colgroup col[name="gutter"] {
display: none !important;
width: 0 !important;
}
.el-table__body {
width: 100% !important;
}
.el-input__inner{
background: transparent;
color: #fff;
border: 1px solid #00446B !important;
}
}
vue + element 中el-table 设置表头固定,固定高度出现空白的更多相关文章
- html5 table的表头固定的HTML代码
table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- VM中Linux网络设置(固定ip、连接外网开发环境)
在开发过程中,我们经常需要在linux中进行操作.毕竟服务器的系统大多数都是Linux,所以在dev环境需要配置好一台Linux系统配合开发. 在VMWare Workstation Pro中 ...
- vue 指令中el 的 parentNode 为空的问题
在项目中,突然发现在用vue指令的时候,发现元素el的父元素parentNode变成了null. 代码: if (el.parentNode && !Vue.prototype.$_h ...
- html Table实现表头固定
最近一直在搞前台琐碎的东西,也学习了一下linux,没有时间对新的东西进行深入的研究和学习,没有写博客,不过归咎其原因还是在于自己的惰怠. 废话不多说,今天想将一个前台页面设计的一个小东西分享一下,那 ...
- [置顶] Jsp中的table多表头导出excel文件
首先引入两份JS:copyhtmltoexcel.js以及 tableToExcel.js /* * 默认转换实现函数,如果需要其他功能,需自行扩展 * 参数: * tableID : HTML中Ta ...
- vue+iview中的table表格导出excel表格
一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...
- 前端html之------>Table实现表头固定
文章来源于:https://www.cnblogs.com/dacuotecuo/p/3657779.html,请尊重原创,转载请注明出处. 说明:这里主要实现了表头的固定和上下滚动的滑动实现:时间的 ...
- 如何在vue+element中实现选择框和穿梭框的根据拼音以及拼音首字母以及汉字的模糊搜索
1.汉字: 直接添加对应的 filterable 2.拼音: 穿梭框和选择器的实现方式有所不同 选择器: <1>下载pinyin-match: npm i --save ...
- Table实现表头固定 内容滚动
<div style="width: 800px;"> <div class="table-head"> <table> & ...
- vue+element 中 el-input框 限制只能输入数字及一位小数
仅个人经验,希望能帮到有需要的人. 第一次写 就话不多说了直接上代码. <el-input @keyup.native="proving(index)" v-model=&q ...
随机推荐
- 痞子衡嵌入式:i.MXRT10xx系列ROM的UART SDP设置不同波特率的方法与实践
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT10xx系列ROM的UART SDP设置不同波特率的方法. 恩智浦 i.MXRT 四位数系列目前分为 RT10xx 和 RT ...
- 把 PySide6 移植到安卓上去!
官方教程在此:https://www.qt.io/blog/taking-qt-for-python-to-android 寥寥几句,其实不少坑.凭回忆写的,可能不是很全(无招胜有招) 仅支持 Lin ...
- Fiddler破解钉钉禁止点赞 钉钉点赞一下转换1*10^7+个赞
破解钉钉禁止点赞 点一下1*10^7+个赞 说明:本文未经授权禁止转载 紧急upd 3.14号之后无法点超过一个赞,所以修改数据包时(unlock.html)的数字无法设置那么大,只能设置为1.当然, ...
- Java IO<2> 输入/输出流 FileInputStream/FileOutputStream
输入/输出流 按操作 数据单位不同分为:流 字节流(8 bit) ,字符流(16 bit) 按数据流的 流向不同分为: 输入流,输出流 按流的 角色的不同分为:节点流,处理流 ![image-2 ...
- 【Zookeeper从入门到实战】SpringBoot整合完整指南
Zookeeper从入门到实战:SpringBoot整合完整指南 一.Zookeeper概述 1.1 什么是Zookeeper Zookeeper是一个开源的分布式协调服务,由Apache软件基金会维 ...
- 不写代码,让 AI 生成手机 APP!保姆级教程
你现在看到的 APP,是我完全用 AI 生成的,一行代码都没写!怎么做到的呢? 大家好,我是程序员鱼皮.AI 发展很快,现在随随便便就能生成一个网站,但是怎么纯用 AI 开发能在手机上运行的 APP ...
- springboot中获取配置文件的值
1.在application.properties中ds-portal_service_port=http://192.168.**.**:10001 2.在java中@Autowiredprivat ...
- 《Building REST APIs with Flask》读后感
一. 为什么读这本书? 之所以选择这本书其实是因为最近自己在梳理 JWT 的用法.自己曾参与过的一个项目虽然使用的是 Flask 开发,但是授权使用的 PyJWT,当时以为使用 PyJWT 是行业通用 ...
- MongoDB入门实战教程(11)
前面我们学习了在MongoDB中的写操作事务管理,本篇我们开始进入读操作事务. 1 读数据关注的两个问题 在通过mongodb读取数据时,我们一般需要关注两个问题: (1)从哪里读取? (2)什么样的 ...
- lora物联网网关
lora物联网网关ZLAN9743可以实现RS232/485/422/以太网转 LoRa功能 是一款高性价比远距离无线通讯方案.LoRa和GPRS.4G方案相比它无需入网月租费,和Wifi.Zigbe ...