el-table设置自定义css

weixin_43869439

于 2025-05-27 16:47:45 发布

阅读量644

点赞数 1

CC 4.0 BY-SA版权

文章标签： css elementui

本文链接：https://blog.youkuaiyun.com/weixin_43869439/article/details/148260476

隔行变色、表头颜色

// 设置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;
}