设置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;
}
效果图:
转载于:https://www.cnblogs.com/sweeeper/p/11242275.html
设置element表格透明样式相关推荐
- css设置html表格边框颜色,互联网常识:CSS如何设置htmltable表格边框样式
设置表格边框样式的方法:1.给table元素添加"border:边框宽度 边框样式 边框颜色"样式,可给整个表格设置边框样式:2.给td元素添加"border:边框宽度 ...
- 设置element表格属性(背景透明,颜色,边框...)
/* 整个表格的宽度 */ .tableBox {width: 470px; } /* 标题行的内边距 */ ::v-deep .tableBox th {padding: 3px; } /* 内容行 ...
- CSS如何设置html table表格边框样式
CSS如何设置table表格边框样式 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对table和td技巧性设置表格边框 4.对table和td设 ...
- layui表头样式_layui表格的样式设置
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 layui表格的样式设置 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- 两种方法设置html表格的宽高
文章目录 第一种方法 第二种方法(利用css) 第一种方法 第二种方法(利用css) 1.使用border属性设置表格的边框 2.给table表格设置一个class属性,设置为"mytabl ...
- 如何修改控件边框的样式_Excel如何设置表格边框样式,记住这几个关键属性就懂了...
Excel表格边框的设置,对于制作一个漂亮的工作表,十分有用. 由于审美的差异,我们通常做的表格都是以黑色边框白底为主,或者说,有些人根本不知道除了黑白表格还有带颜色的. 如何设置表格边框属性呢,下面 ...
- EduCoder-Web程序设计基础-html5—表格高级样式的设置-第3关:设置表格的内边框样式
目录 任务描述 相关知识 编程要求 测试说明 代码示例 任务描述 本关任务:编写一个两行两列的表格,实现如下图所示效果. 内部边框 相关知识 为了完成本关任务,你需要掌握:1.表格标签的一般属性,2. ...
- CSS设置原生table表格边框样式(添加表格横线)(附最后表格td画斜线)
table表格边框样式: 推荐这种 原理: 只对table td设置左与上边框: 对table设置右与下边框: <style> .table-c table{border-right:1p ...
- CSS设置表格行列,给bootstrap table设置行列单元格样式
1.根据单元格或者行内其他单元格的内容,给该单元格设置一定的css样式 columns: [{ field: 'index', title: '序号', align:"center" ...
最新文章
- 《Redis入门指南(第2版)》一3.2 字符串类型
- 如何查看表和索引的统计信息
- api怎么写_PHP开发api接口安全验证
- 基于阿里云HiTSDB搭建工业物联网平台实践
- linux下查看日志基本命令
- 【POJ1679】The Unique MST(非严格次小生成树)
- laydate 周_宝来屋:5天168万!海盐周大生新店如何赢过竞品实现可持续化客流-广告随意贴...
- [DOTween]使用过程中的一些注意事项记录
- 两年经验,尽然斩获多家巨头offer,如:蚂蚁、头条、PingCAP~
- 决策树分类器vc维如何计算_机器学习入门第三章:决策树分类器-理论
- 键盘手机JAVA模拟器下载_手机java模拟器
- linux系统怎么关闭445端口,如何关闭window 系统的445端口等方法 预防勒索病毒
- 项目管理十大知识领域一——项目整体管理
- 超过2T硬盘用不了,怎么办?
- Python17_项目实操关卡-人机PK
- 计算机安装硬盘后无法启动不了,双硬盘无法启动提示"invalid partition table"开不了机怎么解决?...
- 基于MatLab实现LSB(最低有效位)算法完成图片数字水印隐写功能
- 【ML】Markov Chain Monte Carlo(MCMC)---Slice sampler(切片采样)和Hierarchical Models(层次模型)
- 利用gensim里word2vec训练实例——分析三国里人物关系
- sketch如何做设计稿交互_设计干货 | Sketch 的交互插件强势更新,再也不用为跳转的事发愁了!...