zoukankan      html  css  js  c++  java
  • element-UI el-table样式(去边框和滚动条样式)

    去边框:

    给el-table绑定class=“customer-table”

    .customer-table th {
      border: none;
    }
    .customer-table td,
    .customer-table th.is-leaf {
      border: none;
    }
    
    .el-table--border,
    .el-table--group {
      border: none;
    }
    
    .customer-table thead tr th.is-leaf {
      border-right: none;
    }
    .customer-table thead tr th:nth-last-of-type(2) {
    }
    
    .el-table--border::after,
    .el-table--group::after {
       0;
    }
    .customer-table::before {
       0;
    }
    .customer-table .el-table__fixed-right::before,
    .el-table__fixed::before {
       0;
    }
    
    .el-table--border th.gutter:last-of-type {
      border-left: none;
    }
    

      效果:

    滚动条样式:

    全局el-table

    *::-webkit-scrollbar {
       4px;
      height: 10px;
      background-color: transparent;
    } /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    *::-webkit-scrollbar-track {
      background-color: #8db4fd;
      border-radius: 2px;
    } /*定义滚动条轨道 内阴影+圆角*/
    *::-webkit-scrollbar-thumb {
      background-color: #1a3f81;
      border-radius: 2px;
    } /*定义滑块 内阴影+圆角*/
    .scrollbarHide::-webkit-scrollbar {
      display: none;
    }
    .scrollbarShow::-webkit-scrollbar {
      display: block;
    }
    效果:
  • 相关阅读:
    面向对象七大基本原则
    JS面向对象的七大基本原则(里氏替换/依赖倒置)
    JS面向对象的七大基本原则(单一/开闭)
    flex均匀布局
    Vue在IDEA的简约安装
    事务及数据表设计
    关于序列化与反序列化
    SQL查询关键字用法
    IO流
    cookie与session
  • 原文地址:https://www.cnblogs.com/XZY30/p/14609979.html
Copyright © 2011-2022 走看看