H5移动端滑动表格固定表头和首列（纯css实现）

HTML部分

<template>
  <!-- 表格部分 -->
  <div class="contain">
    <table class="tb1" frame="void" border="0" cellspacing="0" cellpadding="0">
      <thead>
        <th>表头一</th>
      </thead>
    </table>

    <table class="tb2" frame="void" border="0" cellspacing="0" cellpadding="0">
      <thead>
        <th>表头二</th>

        <th>表头三</th>

        <th>表头四</th>

        <th>表头五</th>

        <th>表头六</th>

        <th>表头七</th>

        <th>表头八</th>
      </thead>
    </table>

    <table class="tb3" frame="void" border="0" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td>一行列一</td>
        </tr>

         <tr>
          <td>二行列一</td>
        </tr>
      </tbody>
    </table>

    <table class="tb4" frame="void" border="0" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td>二行列二</td>

          <td>二行列三</td>

          <td>二行列四</td>

          <td>二行列五</td>

          <td>二行列六</td>

          <td>二行列七</td>

          <td>二行列八</td>
        </tr>

         <tr>
          <td>二行列二</td>

          <td>二行列三</td>

          <td>二行列四</td>

          <td>二行列五</td>

          <td>二行列六</td>

          <td>二行列七</td>

          <td>二行列八</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

css部分

<style scoped lang='scss'>
// 表格部分
.contain {
  -webkit-overflow-scrolling: touch;//ios滑动流畅
  width: 100%;
  height:100%;
  box-sizing: border-box;
  position: relative;
  overflow: scroll;

  th,
  td,
  tr {
    border-bottom: 0.01rem solid #efeff4;
    box-sizing: border-box;
    height: 0.68rem;
    width: 1rem;
    font-weight: normal;
    text-align: center;
  }

  .tb1 {
    background-color: #f6f7f7;
    float: left;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 1.75rem;

    th {
      font-size: 0.12rem;
      color: #212634;
      text-align: left;
      height: 0.42rem;
      padding: 0 0.1rem;
      width: 1.75rem;
    }
  }

  .tb2 {
    background-color: #f6f7f7;
    background-attachment: fixed;
    position: sticky;
    top: 0;
    margin-left: 1.75rem;
    height: 0.42rem;
    width: 7rem;
    display: block;
    z-index: 100;

    th {
      font-size: 0.12rem;
      color: #212634;
      text-align: right;
      height: 0.42rem;
      padding: 0 0.1rem;
    }
  }

  .tb3 {
    background-color: #ffffff;
    position: sticky;
    left: 0;
    z-index: 10;
    width: 1.75rem;

    td {
      font-size: 0.14rem;
      color: #212634;
      text-align: left;
      padding: 0 0.1rem;
    }
  }

  .tb4 {
    width: 7rem;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    margin: 0.42rem 0 0 1.75rem;

    td {
      font-size: 0.16rem;
      color: #212634;
      text-align: right;
      padding: 0 0.1rem;
    }
  }
}
</style>