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;
}

  效果图:

转载于:https://www.cnblogs.com/sweeeper/p/11242275.html

设置element表格透明样式相关推荐

  1. css设置html表格边框颜色,互联网常识:CSS如何设置htmltable表格边框样式

    设置表格边框样式的方法:1.给table元素添加"border:边框宽度 边框样式 边框颜色"样式,可给整个表格设置边框样式:2.给td元素添加"border:边框宽度 ...

  2. 设置element表格属性(背景透明,颜色,边框...)

    /* 整个表格的宽度 */ .tableBox {width: 470px; } /* 标题行的内边距 */ ::v-deep .tableBox th {padding: 3px; } /* 内容行 ...

  3. CSS如何设置html table表格边框样式

    CSS如何设置table表格边框样式 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对table和td技巧性设置表格边框 4.对table和td设 ...

  4. layui表头样式_layui表格的样式设置

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 layui表格的样式设置 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  5. 两种方法设置html表格的宽高

    文章目录 第一种方法 第二种方法(利用css) 第一种方法 第二种方法(利用css) 1.使用border属性设置表格的边框 2.给table表格设置一个class属性,设置为"mytabl ...

  6. 如何修改控件边框的样式_Excel如何设置表格边框样式,记住这几个关键属性就懂了...

    Excel表格边框的设置,对于制作一个漂亮的工作表,十分有用. 由于审美的差异,我们通常做的表格都是以黑色边框白底为主,或者说,有些人根本不知道除了黑白表格还有带颜色的. 如何设置表格边框属性呢,下面 ...

  7. EduCoder-Web程序设计基础-html5—表格高级样式的设置-第3关:设置表格的内边框样式

    目录 任务描述 相关知识 编程要求 测试说明 代码示例 任务描述 本关任务:编写一个两行两列的表格,实现如下图所示效果. 内部边框 相关知识 为了完成本关任务,你需要掌握:1.表格标签的一般属性,2. ...

  8. CSS设置原生table表格边框样式(添加表格横线)(附最后表格td画斜线)

    table表格边框样式: 推荐这种 原理: 只对table td设置左与上边框: 对table设置右与下边框: <style> .table-c table{border-right:1p ...

  9. CSS设置表格行列,给bootstrap table设置行列单元格样式

    1.根据单元格或者行内其他单元格的内容,给该单元格设置一定的css样式 columns: [{ field: 'index', title: '序号', align:"center" ...

最新文章

  1. 《Redis入门指南(第2版)》一3.2 字符串类型
  2. 如何查看表和索引的统计信息
  3. api怎么写_PHP开发api接口安全验证
  4. 基于阿里云HiTSDB搭建工业物联网平台实践
  5. linux下查看日志基本命令
  6. 【POJ1679】The Unique MST(非严格次小生成树)
  7. laydate 周_宝来屋:5天168万!海盐周大生新店如何赢过竞品实现可持续化客流-广告随意贴...
  8. [DOTween]使用过程中的一些注意事项记录
  9. 两年经验,尽然斩获多家巨头offer,如:蚂蚁、头条、PingCAP~
  10. 决策树分类器vc维如何计算_机器学习入门第三章:决策树分类器-理论
  11. 键盘手机JAVA模拟器下载_手机java模拟器
  12. linux系统怎么关闭445端口,如何关闭window 系统的445端口等方法 预防勒索病毒
  13. 项目管理十大知识领域一——项目整体管理
  14. 超过2T硬盘用不了,怎么办?
  15. Python17_项目实操关卡-人机PK
  16. 计算机安装硬盘后无法启动不了,双硬盘无法启动提示"invalid partition table"开不了机怎么解决?...
  17. 基于MatLab实现LSB(最低有效位)算法完成图片数字水印隐写功能
  18. 【ML】Markov Chain Monte Carlo(MCMC)---Slice sampler(切片采样)和Hierarchical Models(层次模型)
  19. 利用gensim里word2vec训练实例——分析三国里人物关系
  20. sketch如何做设计稿交互_设计干货 | Sketch 的交互插件强势更新,再也不用为跳转的事发愁了!...

热门文章

  1. lua自动化脚本关于文本读写和特殊不可见字符转换的处理
  2. 凯立德手机导航APP全新升级 小长假结伴出行说走就走
  3. 哪些方法不能够实施Spring AOP事务
  4. TreeMap之floorKey
  5. 模态对话框和非模态对话框的消息循环
  6. QuickFlow之任务代理-TaskDelegation
  7. 下载天方听书网的媒体
  8. 剑指Offer(Java实现)按之字形顺序打印二叉树
  9. oracle expdp 多线程,Oracle expdp 过滤和并行
  10. Google BERT模型提取句子Token特征