zoukankan      html  css  js  c++  java
  • element表格样式修改

    修改element的样式的时候style标签不能加上scoped所以为了防止修改的样式影响到别的页面,建议在当前页面加一个id,修改时带上id

    <template>
       <div id="building-top">
    </div>
    </template>
    

    修改头部背景

    #building-top .el-table th{
        background: #344067;
      }
    
    

    修改行背景

     #building-top .el-table tr{
       background: #16203C;
      }
    

    修改斑马线背景

    #building-top .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: #1f284c;
      }
    

    修改行内线的颜色

    #building-top .el-table td,.building-top .el-table th.is-leaf {
        border-bottom:  1px solid #ccc;
      }
    

    修改表格最底部颜色和高度

     #building-top .el-table::before{
       border-bottom:  1px solid #ccc;
        height: 2px
      }
    

    修改表头字体颜色

    #building-top .el-table thead {
        color: #8EB7FA;
        font-weight: 500;
      }
    

    修改表格内容部分字体颜色

     #building-top .el-table{
        color: #6B91CE;
      }
    

    修改表格无数据背景,字体颜色

    #building-top .el-table__empty-block{
        background: #16203C;
      }
    #building-top .el-table__empty-text{
      color: #ccc
    }
    

    修改表格鼠标悬浮hover背景色

    #building-top .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #114696;
    }


    作者:神话降临
    链接:https://www.jianshu.com/p/4ff9a5397427
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    软件工程第一周开课博客
    求数组的子数组之和的最大值
    学习进度_第二周
    当堂测试感受
    寒假生活体验
    家庭记账本七
    《人月神话》阅读笔记3
    家庭记账本六
    《人月神话》阅读笔记2
    寒假福利2
  • 原文地址:https://www.cnblogs.com/cndl/p/15331002.html
Copyright © 2011-2022 走看看