elementUI 表格隔行换色,修改table表头背景样式

要修改elementUI 的表格默认样式,需要有足够的耐心,在浏览器中寻找它自带的样式,然后在本地公共样式中覆盖。

在项目公共css文件中,添加如下代码。

表格隔行换色:

css 复制代码
.el-table .el-table__body tr:nth-child(even) {
  background-color: #031E40; /* 偶数行背景色 */
}
.el-table .el-table__body tr:nth-child(odd) {
  background-color: #03102B; /* 奇数行背景色 */
}
.el-table .el-table__body tr:hover > td {
  background-color: #000 !important; /* 鼠标移入行背景色 */
}

修改table表头背景样式:

可以修改表头颜色,也可以为其添加背景图。
注意:要为表头tr 添加背景图,需将th的背景初始为none。

css 复制代码
.el-table__header-wrapper, .el-table__fixed-header-wrapper {
    tr{
      background: url(../images/table-head-bg.png) no-repeat;
      background-position: center;
      background-size: cover;
    }
    th {
      word-break: break-word;
      background: none !important; // 将th的背景初始为none
      border-bottom: none !important;
      color: #fff;
      height: 40px !important;
      font-size: 13px;
    }
  }

修改所有输入框、下拉框,文本框的背景样式:

css 复制代码
.el-form-item__content{
    color: #eee;
    .el-input__wrapper{
      input{
        color: #fff;
      }
      background-color: #031E40;
      box-shadow:0px 0px 0px 1px #0680cb;
    }
    .el-select__wrapper{
      background-color: #031E40;
      box-shadow:0px 0px 0px 1px #0680cb;
      span{
        color: #fff;
        background-color: #031E40 !important;
      }
    }
    .el-textarea__inner{
      background-color: #031E40;
      box-shadow:0px 0px 0px 1px #0680cb;
      color: #fff;
    }
  }
相关推荐
YongGit18 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖2 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤2 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js