H5实现首行固定表格

一、效果展示

1、效果视频展示

首行固定表格效果-CSDN直播首行固定表格效果https://live.csdn.net/v/325995

2、效果图片展示

二、HTML实现

  <div class="branch_table" v-show="tabActive == 1">
        <div class="table_head">
          <table style="border-spacing: 0px">
            <thead class="table_title">
              <tr>
                <th>分校</th>
                <th>累计访问<br />人数</th>
                <th>累计访问<br />时长(min)</th>
                <th>昨日新增<br />访问人数</th>
                <th>昨日新增访<br />问时长(min)</th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="table_body">
          <table class="branch_tbody" align="center">
            <tbody>
              <tr v-for="item in clueList" :key="item.branchId">
                <td>{
   
   { item.branchName }}</td>
                <td>{
   
   { item.totalUv }}</td>
                <td>{
   
   { item.totalVisitTime.toFixed(2) }}</td>
                <td>{
   
   { item.increasedUv }}</td>
                <td>{
   
   { item.increasedVisitTime.toFixed(2) }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

.branch_table {
  height: calc(100% - 136px);
  /deep/.van-sticky--fixed {
    width: 343px;
  }
  .table_title {
    width: 343px;
    font-size: 12px;
    height: 52px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 400;
    color: #ffffff;
    border-radius: 16px;
    tr {
      display: flex;
      height: 52px;
      th {
        background: #5b8ff9;
        border-right: 1px solid #fff;
        padding-top: 10px;
        box-sizing: border-box;
      }
    }
    th,
    td {
      width: 64px;
      font-size: 12px;
      text-align: center;
      font-weight: 500;
    }
    th:first-child {
      width: 80px;
      padding-top: 18px;
      border-radius: 16px 0px 0px 0px;
    }
    th:last-child {
      width: 71px;
      border-radius: 0px 16px 0px 0px;
    }
  }
  .table_body {
    // height: calc(100vh - 200px);
    height: calc(100% - 55px);
    // overflow: scroll;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .branch_tbody {
    width: 100%;
    border-collapse: collapse;
    tr {
      display: flex;
      height: 32px;
      &:nth-child(odd) {
        background: #e8f7ff;
        // border: 0.02667rem solid #f7f7f7;
      }
      &:nth-child(even) {
        background: #fff9ed;
      }
      &:last-child {
        border-bottom: 1px solid #f7f7f7;
      }
      td {
        width: 64px;
        height: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        justify-content: center;
        font-size: 14px;
        text-align: center;
        border: 1px solid #f7f7f7;
        border-left: none;
        border-bottom: none;
      }
      td:first-child {
        width: 80px;
        font-size: 12px;
        font-weight: 600;
        border-left: 1px solid #f7f7f7;
        background-color: #ffffff;
      }
      td:last-child {
        width: 71px;
      }
    }
  }
}

三、实现思路

思路一：利用固定定位将表头固定

通过固定定位实现之后，大体效果虽然实现了，但是在ios遇到了问题：拖动整个表格的时候，表体会移动，但是表头还固定在页面上十分怪异

思路二、利用粘性布局

粘性布局在部分安卓手机自带的浏览器上遇到了问题，表头随着表格滚动上去了，没有固定表头的效果，具体原因没有深究

思路三、拆分表头表体（自测是效果最优的）

把表头和表格体拆分，表体滚动的关键在于固定高度，超出高度部分显示滚动条，