table 滚动时固定表头

表格内容过多时，仅滚动数据，表头不动

  table {
    height: 100%;
    overflow: auto;
    table-layout: fixed;
    display: block;

    & > thead {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      display: table;
      width: 100%;
      table-layout: fixed;
      z-index: 1;
    }

    & > tbody {
      display: table;
      width: 100%;
      table-layout: fixed;
    }
  }

表格html：

<table>
  <thead>
    <tr>
      <th width="50px"></th>
      <!--表头-->
    </tr>
  </thead>
  <tbody>
    <tr v-if="tableData.length">
      <td width="50px"></td>
      <!--表内容-->
    </tr>
    <tr v-else>
      <td colspan="5" style="text-align: center;">暂无数据</td>
    </tr>
  </tbody>
</table>