el-table设置自定义css

隔行变色、表头颜色

css 复制代码
// 设置table字体颜色、背景色
.el-table {
  color: #ffffff;
  background-color: transparent !important;
}

设置隔行变色功能

css 复制代码
.el-table__body {
  tr.el-table__row {
    &:nth-child(even) {
      td.el-table__cell {
        background-color: #08417f;
      }
    }
    &:nth-child(odd) {
      td.el-table__cell {
        background-color: #0b3a74;
      }
    }
    &:hover {
      td.el-table__cell {
        background-color: #09529b;
      }
    }
  }
}

设置表头颜色

css 复制代码
.el-table thead {
  font-size: 14px;
  font-weight: 400;
  color: #479eff;
  background-color: #0064b3;
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none;
}
.el-table th,
.el-table tr,
.el-table td {
  background-color: transparent !important;
}
相关推荐
BillKu10 分钟前
Vue3 + Element Plus 防止按钮重复点击的解决方案
javascript·vue.js·elementui
cumber2 小时前
微前端常用技术介绍:CSS Module
前端·css
moxiaoran57533 小时前
uni-app学习笔记十七-css和scss的使用
css·学习·uni-app
struggle20254 小时前
VoltAgent 是一个开源 TypeScript 框架,用于构建和编排 AI 代理
javascript·css·人工智能·typescript·开源
Quke陆吾5 小时前
Vue框架2(vue搭建方式2:利用脚手架,ElementUI)
前端·vue.js·elementui
一只鱼^_5 小时前
用JS实现植物大战僵尸(前端作业)
javascript·css·vscode·游戏引擎·游戏程序·html5·动画
魔云连洲5 小时前
使用 SASS 与 CSS Grid 实现鼠标悬停动态布局变换效果
前端·css·sass
babicu12311 小时前
CSS Day07
java·前端·css
鬼多不菜14 小时前
一篇学习CSS的笔记
java·前端·css
祺简14 小时前
CSS--background-repeat详解
前端·css