el-table背景颜色等样式修改

最新推荐文章于 2024-08-22 01:15:54 发布

沐沐南

最新推荐文章于 2024-08-22 01:15:54 发布

阅读量7.7k

点赞数 9

分类专栏： vue 文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/tutouxiaoyaonie/article/details/126763228

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这篇博客主要介绍了如何使用CSS来定制表格的样式，包括设置表格单元格的间距、整体表格的背景颜色和边框弧度、字体颜色、标题的背景与字体颜色，以及如何去除边框和行下划线。同时，还展示了如何在鼠标悬停时改变行的背景颜色，以及添加和调整标题下划线的方法。

摘要由CSDN通过智能技术生成

  //表格间距
  .el-table--mini .el-table__cell{
    padding: 4px 0
  }

  //整个表格背景颜色及边框弧度
  .el-table{
    background-color: rgba(38, 38, 38, 0.75);
    border-radius: 9px;
  }

  //字体颜色
  .el-table tr{
    background-color: transparent;
    color: white;
  }

  //标题背景颜色
  .el-table th{
    background-color: transparent !important;
  }

  //标题字体颜色
  .el-table th > .cell{
    color: white;
  }

  //去除边框
  .el-table--border{
    border:none;
  }
  
  //去除行下划线
  .el-table td.el-table__cell{
    border: 0px;
  }

  //标题加下划线
  .el-table__header-wrapper, .el-table__footer-wrapper{
    border-bottom: 1px solid rgba(255,255,255,0.3);
  }

  //修改鼠标滑过背景颜色
  .el-table--enable-row-hover .el-table__body tr:hover>td{
    background-color: rgba(38, 38, 38, 0.75) !important;
    color:white !important;
  }