el-table背景透明

爱吃羊的狗

已于 2023-03-01 10:47:03 修改

阅读量473

点赞数

分类专栏： vue 文章标签： vue.js elementui javascript

于 2022-11-22 12:04:12 首次发布

本文链接：https://blog.csdn.net/VIVI_CSDN01/article/details/127980207

版权

vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

el-table背景透明

备注：在当前页面的 style 中修改表格样式需要使用穿透，全局样式不需要穿透

.box /deep/ .el-table,.el-table__expanded-cell{
  background:transparent
}
/* 每行（表头除外） */
.box /deep/ .el-table tr{
  background:transparent
}
/* 表头 */
.box /deep/ .el-table__header th{
  background: transparent !important;
}
.box /deep/ .el-table__body td,.el-table__header th,.el-table .cell{
  background:transparent
}
/* 鼠标经过单元格背景色透明 */
.box /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td{
  background-color:transparent;
}

/* 边框线 */
.box /deep/ .el-table--border th,.el-table--border td{
  border-right:1px solid #28396a!important
}
.box /deep/ .el-table th .is-leaf,.el-table td{
  border-bottom:1px solid #28396a!important
}
.box /deep/ .el-table td,.el-table th .is-leaf,.el-table--border,.el-table--group{
  border-color:#3083fa!important
}
.box /deep/ .el-table--border::after,.el-table--group::after,.el-table::after{
  border-color:#3083fa!important
}
.box /deep/ .el-table--border::after,.el-table--group::after,.el-table::before{
  background-color: #3083fa!important;
}
/* 表头字体颜色 */
.el-table thead{
  color:#635e5e
}
/* 除表头以外的字体颜色 */
.el-table{
  color: #3083fa;
}