element-ui改造表格样式

element-ui中没有只有外边框，我内边框不要的表格 所以就做了下小改造
改造之后的效果：

代码

    <el-table
      class="table-detail"
      :header-cell-style="{ background: '#F7F8FA', color: '#333333' }"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>

样式

  .table-detail {
    border: 1px solid #dedede;
    border-top: none;
    thead {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333333;
      letter-spacing: 0;
      th {
        background: #f5f5f5;
        font-weight: normal;
      }
    }
    .wait {
      color: #2d8cf0;
      border-color: rgba(45, 140, 240, 0.1);
      background-color: rgba(45, 140, 240, 0.1);
    }
    .gray {
      color: #606266;
      border-color: rgba(96, 98, 102, 0.1);
      background-color: rgba(96, 98, 102, 0.1);
    }
    .yellow {
      color: #f7b500;
      border-color: rgba(247, 181, 0, 0.1);
      background-color: rgba(247, 181, 0, 0.1);
    }
    .green {
      color: #6dd400;
      border-color: rgba(109, 212, 0, 0.1);
      background-color: rgba(109, 212, 0, 0.1);
    }
    .danger {
      color: #fa5152;
      border-color: rgba(250, 81, 82, 0.1);
      background-color: rgba(250, 81, 82, 0.1);
    }
  }