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表格透明样式的更多相关文章

  1. css设置兼容的透明样式

    css设置透明并实现兼容: <style>div{ filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; o ...

  2. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  3. 设置div背景透明的CSS样式

    div背景透明样式: 样式代码: .alert{filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opacity ...

  4. JavaScript(第二十天)【DOM操作表格及样式】

    DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一.操作表格 <table& ...

  5. JavaScript--DOM操作表格及样式(21)

    一 操作表格 // <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = d ...

  6. vue修改Element的el-table样式

    修改Element中的el-table样式,可以使用以下几种方法: 1. row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style. 2. ...

  7. ch7对表单和数据表格使用样式

    对数据表格应用样式 1.表格特有的元素 caption:基本上用做表格的标题.summary:可应用于表格的标签,用来描述表格的内容(与image的alt文本相似) <table class=& ...

  8. WPF DevExpress 设置雷达图Radar样式

      DevExpress中定义的ChartControl很不错,很多项目直接使用这种控件. 本节讲述雷达图的样式设置 <Grid> <Grid.Resources> <D ...

  9. ExtJs 设置GridPanel表格文本垂直居中

    业务场景,需要实现最终效果图如下: GridPanel代码如下配置: { xtype : 'grid', id : 'grid_jglb', frame : true, region : 'cente ...

随机推荐

  1. 升级至webpack4.x踩坑记(热更新局部更新失败的问题修复)

    零.前言 webpack升级的时候,会碰到各种个样的问题,大多数网上都能查到解决方案最简单的方案. 思路如下: 1.把css-loader,xxxloader等依赖都升级到最新 2.根据webpack ...

  2. EXE的32位或64位判断

    C:\Program Files (x86)\Microsoft Visual Studio 10.0\VC> dumpbin /headers "Program.exe" ...

  3. Play with Chain 【HDU - 3487】【Splay+TLE讲解】

    题目链接 很好的一道题,用了三天多的时间,终于知道了我为什么T的原因,也知道了在Splay的同时该怎样子的节约时间,因为Splay本身就是大常数的O(N*logN),我们如果不在各种细节上节约时间,很 ...

  4. MySQL 查询语句--------------进阶8:分页查询

    #进阶8:分页查询 /* 应用场景:要显示的数据,一页显示不全,需要分页提交sql请求 语法: select 查询列表 from 表 [join type] join 表2 on 连接条件 [wher ...

  5. JSP基础--会话跟踪技术、cookie、session

    会话跟踪技术 1 什么是会话跟踪技术 我们需要先了解一下什么是会话!可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应.例如你给10086打个电话,你就是客户端,而10 ...

  6. Pikachu漏洞练习平台实验——php反序列化、XXE、SSRF(九)

    1.序列化和反序列化 1.1.概述 在理解这个漏洞前,你需要先搞清楚php中serialize(),unserialize()这两个函数. 序列化serialize()序列化说通俗点就是把一个对象变成 ...

  7. 线上服务器CPU100%排查

    某服务器上部署了若干tomcat实例,即若干垂直切分的Java站点服务,以及若干Java微服务,突然收到运维的CPU异常告警. 问:如何定位是哪个服务进程导致CPU过载,哪个线程导致CPU过载,哪段代 ...

  8. let/const及块级作用域

    本系列是在平时阅读.学习.实际项目中有关于es6中的新特性.用发的简单总结,目的是记录以备日后温习:本系列预计包含let/const.箭头函数.解构.常用新增方法.Symbol.Set&Map ...

  9. metasploit下Windows的多种提权方法

    metasploit下Windows的多种提权方法 前言 当你在爱害者的机器上执行一些操作时,发现有一些操作被拒绝执行,为了获得受害机器的完全权限,你需要绕过限制,获取本来没有的一些权限,这些权限可以 ...

  10. navicat连接Oracle数据库提示错误 ORA-12514

    这个是服务名写错了,服务名的字段在Oracle安装路径里找 这个我的服务名,这好像是重装Oracle就会变我之前的事orcl,重装之后发现连接不上数据库了,就倔强着找到了它 备注:如果是连接远程Ora ...