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;
}
相关推荐
失忆爆表症10 小时前
05_UI 组件库集成指南:Shadcn/ui + Tailwind CSS v4
前端·css·ui
会一丢丢蝶泳的咻狗16 小时前
Sass实现,蛇形流动布局
前端·css
EchoEcho20 小时前
记录overflow:hidden和scrollIntoView导致的页面问题
前端·css
im_AMBER21 小时前
告别“玄学”UI:从“删代码碰运气”到“控制 BFC 结界”
前端·css
芳草萋萋鹦鹉洲哦21 小时前
【Tailwind】动画解读:Tailwind CSS Animation Examples
前端·css
Mr Xu_2 天前
前端开发中CSS代码的优化与复用:从公共样式提取到CSS变量的最佳实践
前端·css
Lee川2 天前
CSS盒模型实战:用代码透视 `border-box`与 `content-box`的天壤之别
css
哈里谢顿2 天前
CSS 入门完全指南:从零构建你的第一个样式表
css
. . . . .2 天前
CSS 编写与管理范式 - Tailwind和CSS-in-JS
css
RFCEO3 天前
前端编程 课程十六、:CSS 盒子模型
css·前端基础课程·css盒子模型·css盒子模型的组成·精准控制元素的大小和位置·css布局的基石·内边距(padding)