H5 implements fixed first row table

1. Effect display

1. Effect video display

First row fixed table effect - CSDN live broadcast first row fixed table effect https://live.csdn.net/v/325995

2. Effect picture display

Two, HTML implementation

  <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;
      }
    }
  }
}

3. Implementation ideas

Idea 1: Use fixed positioning to fix the meter head

After implementing it through fixed positioning, although the general effect was achieved, we encountered a problem on iOS: when dragging the entire table, the table body will move, but the table header is still fixed on the page, which is very weird.

Idea 2: Use sticky layout

Sticky layout has encountered problems on the browsers that come with some Android phones. The table header moves up as the table scrolls, and there is no effect of fixing the table header. The specific reason has not been studied in detail.

Idea 3: Split the table header and body (self-test is the most effective)

Split the table header and table body. The key to scrolling the table body is to fix the height. The scroll bar will be displayed in the part beyond the height.