table 固定表头，tbody可滚动

HTML:

  <div class="table-box">
        <table>
          <thead>
            <tr>
              <th class="">表头1</th>
              <th class="">表头2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                表头1下的td
              </td>
              <td>表头2下的td</td>
            </tr>
          </tbody>
        </table>
      </div>

CSS:

  .table-box{
    margin: 0.44rem;
    width: 90%;
    height: 7.31rem; //***固定高度
    overflow: auto; //***滚动
    text-align: center;
    font-size: 0.33rem;
    font-weight: 400;
    table {
      // *****重点来了
      width: 100%;
      border-collapse: separate;
      table-layout: fixed;
    }
    thead tr th {
      // *****重点来了
      position: sticky;
      top: 0;
    }
    th {
      width: 40%;
      text-align: center;
      height: 0.89rem;
      background: rgba(248, 249, 250, 1);
      color: rgba(0, 0, 0, 0.45);
    }
    td {
      width: 40%;
      height: 1.16rem;
      color: rgba(0, 0, 0, 0.85);
      border-bottom: 0.03rem solid #f0f0f0;
    }
  }