vue2项目开发中，需要实现类似如下效果图的效果，因为有横向滚动条，这里使用element ui el-table来实现，只需要通过css来将样式修改为我们需要的效果就可以了，这里使用了斑马纹的效果，通过设置 stripe来实现。

代码实现效果

实现代码

因为滚动条也需要自定义样式，我们需要配置滚动条的样式，之前我们写过类似的效果：vue element ui table 滚动条样式自定义，这里我们直接把之前的代码搬过来

<div class="popWinMainInner">
    <el-table :data="tableData" height="100%" style="width: 100%" stripe>
      <el-table-column label="项目标识" align="center" prop="bs">
        <template slot-scope="scope">
          <span class="bs">{{ scope.row.bs }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" show-overflow-tooltip prop="name" align="center">
      </el-table-column>
      <el-table-column label="项目类型" prop="type" align="center">
        <template slot-scope="scope">
          <span class="lx">{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" prop="userName" align="center">
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" align="center">
      </el-table-column>
      <el-table-column label="开始时间" prop="startTime" align="center">
      </el-table-column>
      <el-table-column label="结束时间" prop="endTime" align="center">
      </el-table-column>
    </el-table>
  </div>

<style lang="scss">
.popWinMainInner {
  position: relative;
  height: 100%;
  width: 100%;


  .lx {
    width: 68px;
    height: 26px;
    margin: auto;
    background: rgba(#47C8FF, 0.2);
    border-radius: 2px 2px 2px 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #00FFFF;
  }

  .el-table, .el-table__expanded-cell {
    background: none !important;
  }

  .el-table tr {
    background: #053275 !important;
  }

  .el-table td.el-table__cell div {
    color: rgba(184, 204, 255, 1) !important;
  }

  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border: none !important;
  }

  .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: #0c4693 !important;

    .lx {
      width: 68px;
      height: 26px;
      margin: auto;
      background: rgba(255, 184, 1, 0.2);
      border-radius: 2px 2px 2px 2px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: rgba(255, 184, 1, 1);
    }
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background: #0c4693 !important;
  }

  .el-table th.el-table__cell {
    background: #1455aa !important;
    color: rgba(71, 200, 255, 1);
  }

  .el-table--border::after, .el-table--group::after, .el-table::before {
    background-color: rgba(#EBEEF5, 0);
  }

  //纵向滚动条
  .is-scrolling-none::-webkit-scrollbar {
    width: 6px;
    height: 200px;
  }

  .bs {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #FFB801;
  }

  /*滚动条滑块*/
  .is-scrolling-none::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px #189abc;
    background: #115091;
  }

  /*滚动条轨道*/
  .is-scrolling-none::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px #1f4962;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0);
  }

  //横向
  //横向horizontal

  .is-scrolling-left::-webkit-scrollbar {
    width: 100%;
    height: 10px;
  }

  /*滚动条滑块*/
  .is-scrolling-left::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    background: #56B5FF;
    border-radius: 5px;
  }

  /*滚动条轨道*/
  .is-scrolling-left::-webkit-scrollbar-track {

  }

  /*滚动条轨道*/
  .is-scrolling-left::-webkit-scrollbar-track-piece {
    background-color: rgba(2, 6, 23, 0);
  }

  //横向滚动右侧
  .is-scrolling-right::-webkit-scrollbar {
    width: 100%;
    height: 10px;
  }

  /*滚动条滑块*/
  .is-scrolling-right::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    background: #56B5FF;
    border-radius: 5px;
  }

  /*滚动条轨道*/
  .is-scrolling-right::-webkit-scrollbar-track {

  }

  /*滚动条轨道*/
  .is-scrolling-right::-webkit-scrollbar-track-piece {
    background-color: rgba(2, 6, 23, 0);
  }

  //横向滚动中部
  .is-scrolling-middle::-webkit-scrollbar {
    width: 100%;
    height: 10px;
  }

  /*滚动条滑块*/
  .is-scrolling-middle::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    background: #56B5FF;
    border-radius: 5px;
  }

  /*滚动条轨道*/
  .is-scrolling-middle::-webkit-scrollbar-track {

  }

  /*滚动条轨道*/
  .is-scrolling-middle::-webkit-scrollbar-track-piece {
    background-color: rgba(2, 6, 23, 0);
  }

}
</style>