设置element表格透明样式
1.element table 表格 修改背景为透明并去除边框
.el-table{
/* 表格字体颜色 */
color:white;
/* 表格边框颜色 */
/* border: 0.5px solid #758a99; */
height: 500px;
}
/* 表格内背景颜色 */
.el-table th, .el-table tr,.el-table td{
border: 0;
background-color: transparent;
}
/* 双数行背景颜色 */
.el-table--striped .el-table__body tr.el-table__row--striped td {
background-color:#fff;
background-color: rgba(148, 144, 144, 0.3)
}
/* 使表格背景透明 */
.el-table th, .el-table tr {
background-color: transparent;
}
/* 删除表格下横线 */
.el-table::before {
left: 0;
bottom: 0;
width: 100%;
height: 0px;
}
/* 表格表头字体颜色 */
.el-table thead {
color: white;
font-weight: 500;
background-color: rgba(148, 144, 144, 0.3)
}
效果:

2.效果2
/* 表格样式*/
.el-table__header th, .el-table__header tr {
background:transparent;
color: white;
}
.el-table--enable-row-hover .el-table__body tr:hover>td{
background: transparent !important;
}
.el-pager li.active {
color: #080909;
cursor: default;
background-color: #17B3A3;
border-radius: 2px;
}
.el-table th, .el-table tr {
background-color: transparent;
}
.el-table th, .el-table tr,.el-table td{
background-color: transparent;
}
.el-table th:hover, .el-table tr:hover{
color: #4A95F6;
background-color: darkgray!important;
}
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
.el-table__body tr.current-row>td, .el-table__body tr.hover-row.current-row>td,
.el-table__body tr.hover-row.el-table__row--striped.current-row>td,
.el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td {
color: #4A95F6;
background-color: darkgray!important;
}
效果图:

设置element表格透明样式的更多相关文章
- css设置兼容的透明样式
css设置透明并实现兼容: <style>div{ filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; o ...
- [转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
- 设置div背景透明的CSS样式
div背景透明样式: 样式代码: .alert{filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opacity ...
- JavaScript(第二十天)【DOM操作表格及样式】
DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一.操作表格 <table& ...
- JavaScript--DOM操作表格及样式(21)
一 操作表格 // <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = d ...
- vue修改Element的el-table样式
修改Element中的el-table样式,可以使用以下几种方法: 1. row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style. 2. ...
- ch7对表单和数据表格使用样式
对数据表格应用样式 1.表格特有的元素 caption:基本上用做表格的标题.summary:可应用于表格的标签,用来描述表格的内容(与image的alt文本相似) <table class=& ...
- WPF DevExpress 设置雷达图Radar样式
DevExpress中定义的ChartControl很不错,很多项目直接使用这种控件. 本节讲述雷达图的样式设置 <Grid> <Grid.Resources> <D ...
- ExtJs 设置GridPanel表格文本垂直居中
业务场景,需要实现最终效果图如下: GridPanel代码如下配置: { xtype : 'grid', id : 'grid_jglb', frame : true, region : 'cente ...
随机推荐
- 【The type javax.servlet.http.HttpServletRequest cannot be resolved】解决方案
是缺少serverlet的引用库,解决如下 1.工程右键-properties->java build path 2.在java build path的libraries tab页中选择Add ...
- jmeter之断言的使用
和写功能测试用例一样,写接口测试用例也可以先可以写预期结果,然后用于后面的批量执行接口用例 目录 1.jmeter常用的断言元件 2.响应断言 3.json串断言 1.jmeter常用的断言元件 jm ...
- vue全局自定义指令-元素拖拽
小白我用的是vue-cli的全家桶,在标签中加入v-drap则实现元素拖拽, 全局指令我是写在main.js中 Vue.directive('drag', { inserted: function ( ...
- java数组,遍历数组
数组:一组具有相同数据类型的集合(容器) 1.数组声明格式: 数据类型 [] 数组名 = new 数据类型[长度]: 数组长度一旦确定无法更改. 数组里的数据必须是相同类型或自动向上转型后兼容的类型 ...
- mysql 主从复制(mysql双机热备的实现)
转:http://blog.csdn.net/qq394829044/article/details/53203645 Mysql数据库没有增量备份的机制,当数据量太大的时候备份是一个很大的问题.还好 ...
- 前缀和序列 & 差分序列
前缀和序列 所谓前缀和数组,就是从第一个元素到当前元素的和.假设这个前缀和数组为d[],原数组为a[],那么d[ i ] = a[ 1 ]+a[ 2 ]+a[ 3 ]+...+a[ i-1 ]+a[ ...
- Linux服务器安全配置小结(转)
众所周知,网络安全是一个非常重要的课题,而服务器是网络安全中最关键的环节.Linux被认为是一个比较安全的Internet服务器,作为一种开放源代码操作系统,一旦Linux系统中发现有安全漏洞,Int ...
- go 文件读写
go 文件读写有很多方式 ioutil读文件 package main import ( "io/ioutil" "fmt" ) func main() { d ...
- MVC与设计模式的关系及MVC的实现原理和设计原理
1 MVC介绍 众所周知MVC不是设计模式,是一个比设计模式更大一点的模式,称作设计模式不合理,应该说MVC它是一种软件开发架构模式,它包含了很多的设计模式,最为密切是以下三种:Observer (观 ...
- js中Date的构造函数解读
javascript中的内置对象是我们经常会用到的,那么今天我们就来说说Date的四种构造方法吧 一.new Date() 这是我们最常使用也最熟悉不过的Date对象的构造方法了,通过无参数的构造函数 ...