el-table设置自定义css

最新推荐文章于 2025-09-14 21:58:58 发布

原创最新推荐文章于 2025-09-14 21:58:58 发布 · 836 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #elementui

该文章已生成可运行项目，

隔行变色、表头颜色

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

设置隔行变色功能

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

设置表头颜色

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