当前位置: 首页 > article >正文

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

要修改elementUI 的表格默认样式,需要有足够的耐心,在浏览器中寻找它自带的样式,然后在本地公共样式中覆盖。
在项目公共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。

.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;
    }
  }

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

.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;
    }
  }

http://www.kler.cn/a/566777.html

相关文章:

  • 排序算法归类整理对比
  • 002-快速安装 Linux 虚拟机
  • PyCharm中通过命令行执行`pip`命令下载到哪里了:虚拟环境目录下
  • 如何通过网管提升运维效率?
  • 游戏引擎学习第125天
  • Shell学习(5/6) 流程控制-函数
  • 数据结构秘籍(二)图(含图的概念、存储以及图的两大搜索)
  • 无人机定点运输技术!
  • CSS 系列之:grid 布局
  • Windows环境下安装Redis并设置Redis开机自启
  • React进阶之前端业务Hooks库(三)
  • docker部署go简单web项目(无mysql等附加功能)
  • React组件化深度解析(二):从受控组件到生命周期现代化
  • 【Wireshark 02】抓包过滤方法
  • 三十、Helm和Operator
  • PDF文档中表格以及形状解析
  • 密码学(哈希函数)
  • 3-4 WPS JS宏 工作表的新建、删除与错务内容处理(批量新建工作表)学习笔记
  • 【考试大纲】高级系统架构设计师考试大纲
  • uniapp中使用leaferui使用Canvas绘制复杂异形表格的实现方法