el-table 修改背景为透明并去除边框

实际项目中的场景:为了适配动画页面,需要把table背景颜色改为透明,去除掉外边框,滚动条设置

效果图如下:
在这里插入图片描述

HTML代码块

	<div class="threeCar-table">
        <el-table :data="carData" border :max-height="640">
          <el-table-column
            prop="title"
            label="名称"
            width="160"
          ></el-table-column>
          <el-table-column prop="data" label="车辆数据"></el-table-column>
        </el-table>
      </div>

CSS代码块

 .threeCar-table {
    
    
    position: absolute;
    // float: left;
    width: 400px;
    margin: auto;
  }
  .threeCar-table /deep/ .el-table--fit{
    
    
    padding: 20px;
  }
  .threeCar-table /deep/  .el-table, .el-table__expanded-cell {
    
    
      background-color: transparent;
  }
  .threeCar-table /deep/.el-table::before {
    
    
    height: 0px;
  }
  .threeCar-table /deep/.el-table--border::after {
    
    
    width: 0px;
  }
  .threeCar-table /deep/.el-table--border {
    
    
    border: none;
  }
  .threeCar-table /deep/ .el-table tr {
    
    
      background-color: transparent!important;
      font-weight:700;
      color:#FF6100 ;
  }
  .threeCar-table /deep/ .el-table th {
    
    
      background-color: transparent!important;
      font-weight:700;
      color:#FF6100 
  }
  .threeCar-table /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
    
    
    background-color: transparent;
  }
  .threeCar-table /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    
    
    width: 6px; // 横向滚动条
    height: 6px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  .threeCar-table /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    
    
    background-color: transparent!important;
    border-radius: 3px;
  }
  .el-table::before {
    
    //去除底部白线
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
  }

猜你喜欢

转载自blog.csdn.net/weixin_43883951/article/details/128237003