自定义table 表头固定

通过css3新属性position：sticky实现表头固定内容滚动（表格外用div包裹给div一个高度）

html

    <table class="custom_table">
        <thead>
          <tr>
            <th>类型</th>
            <th>类型</th>
            <th>类型</th>
            <th>类型</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="item in tableData">
            <tr @click="show(item)">
              <td>{{ item.type }}</td>
              <td>{{ item.type }}</td>
              <td>{{ item.type }}</td>
              <td>{{ item.type }}</td>
            </tr>
          </template>
        </tbody>
      </table>

css

  .custom_table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    position: relative;

    thead tr th {
      background: #639ee1;
      position: sticky;
      top: 0px;
      z-index: 2;
      color: #fff;
      border: none;
    }

    tbody tr {
      &:nth-of-type(odd) {
        background-color: #fff;
      }

      &:nth-of-type(even) {
        background-color: #f6f8fa;
      }
    }

    tr th,
    tr td {
      min-width: 60px;
      text-align: center;
      padding: 12px 6px;
      font-size: 14px;
      font-weight: normal;
      border: 1px solid #ddd;
      box-sizing: border-box;
    }
  }