1.element table 表格 修改背景为透明并去除边框

  1. .el-table{
  2. /* 表格字体颜色 */
  3. color:white;
  4. /* 表格边框颜色 */
  5. /* border: 0.5px solid #758a99; */
  6. height: 500px;
  7. }
  8. /* 表格内背景颜色 */
  9. .el-table th, .el-table tr,.el-table td{
  10. border: 0;
  11. background-color: transparent;
  12. }
  13. /* 双数行背景颜色 */
  14. .el-table--striped .el-table__body tr.el-table__row--striped td {
  15.  
  16. background-color:#fff;
  17. background-color: rgba(148, 144, 144, 0.3)
  18. }
  19. /* 使表格背景透明 */
  20. .el-table th, .el-table tr {
  21. background-color: transparent;
  22. }
  23. /* 删除表格下横线 */
  24. .el-table::before {
  25. left: 0;
  26. bottom: 0;
  27. width: 100%;
  28. height: 0px;
  29. }
  30. /* 表格表头字体颜色 */
  31. .el-table thead {
  32. color: white;
  33. font-weight: 500;
  34. background-color: rgba(148, 144, 144, 0.3)
  35. }

 效果:

2.效果2

  1. /* 表格样式*/
  2. .el-table__header th, .el-table__header tr {
  3. background:transparent;
  4. color: white;
  5. }
  6. .el-table--enable-row-hover .el-table__body tr:hover>td{
  7. background: transparent !important;
  8. }
  9. .el-pager li.active {
  10. color: #080909;
  11. cursor: default;
  12. background-color: #17B3A3;
  13. border-radius: 2px;
  14. }
  15. .el-table th, .el-table tr {
  16. background-color: transparent;
  17. }
  18. .el-table th, .el-table tr,.el-table td{
  19. background-color: transparent;
  20. }
  21. .el-table th:hover, .el-table tr:hover{
  22. color: #4A95F6;
  23. background-color: darkgray!important;
  24. }
  25. .el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
  26. .el-table__body tr.current-row>td, .el-table__body tr.hover-row.current-row>td,
  27. .el-table__body tr.hover-row.el-table__row--striped.current-row>td,
  28. .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td {
  29. color: #4A95F6;
  30. background-color: darkgray!important;
  31. }

  效果图:

设置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. Jmeter-后置处理器(Json extractor)

    后置处理器-json extractor 概念:顾名思义,提取json响应的数据中提取数据: 步骤:sampler-后置处理器-jsonextractor 1.提取单个参数 1.Variable na ...

  2. No-sql之redis常用命令

    转自:http://blog.csdn.net/nicewuranran/article/details/51793760 No-SQL之Redis 介绍 Redis是一种基于内存存储的key-val ...

  3. [Python3 填坑] 015 __str__ 与 __repr__ 的区别

    目录 1. print( 坑的信息 ) 2. 开始填坑 2.1 上例子 2.2 关系与区别 Python 3.7.3 的官方文档 网上看到一个例子,运行了一下 简单地说 1. print( 坑的信息 ...

  4. python 实现加法

    https://ac.nowcoder.com/acm/contest/338/G 链接:https://ac.nowcoder.com/acm/contest/338/G来源:牛客网 题目描述 Th ...

  5. .net core 调用webservice同步方法

    更新VS2019 16.1版本 支持WebService同步调用 在连接服务中->选择客户端选项->Generate Synchronout Operations选择划勾   生成同步操作 ...

  6. 认识Mybatis

    什么是Mybatis? MyBatis 是一款优秀的基于Java的持久层框架(来源于“internet”和“abatis”的组合),它支持定制化 SQL.存储过程以及高级映射. MyBatis 避免了 ...

  7. shell变量的声明和使用

  8. vue,一路走来(9)--聊天窗口

    闲暇时间,介绍一下我做一个聊天窗口的心得.如图: 首先要考虑的是得判断出是自己的信息还是对方发来的信息,给出如图的布局,切换不同的类. <li class="clearfix" ...

  9. django post get

    GET请求和POST请求 GET请求: 1. 浏览器请求一个页面 2. 搜索引擎检索关键字的时候 POST请求: 1. 浏览器向服务端提交数据,比如登录/注册等 判断提交方式: if request. ...

  10. Git 常用命令简单记录

    分布式版本控制系统,跟踪文本文件的改动 ubuntu安装: sudo apt install git 安装完成后,设置使用的用户名和邮箱: 全局: git config --global user.n ...