用原生table作出表头不动，下拉滚动效果

原本是用vue+element做前端的,因为业务需要，要一次性加载所有数据，发现用el-table很卡，于是改用原生table,话说，在性能，自由发挥上，还是原生的好，效果见下图

 

之前在另一公司遇到这种需求我是用两个table解决，但是，会有点问题。现在这公司比较严格，在于是百度，我选择了用一个table做这种效果，这样不会存在我以前做的时候了现的问题。

见代码，请忽略数据填充逻辑，主要靠css来完成这个想法。

 <div class="monTbale-body">
        <table v-loading="tableLoading" class="monTbale" border="0" cellspacing="0" cellpadding="0">
          <thead>
            <tr style="background-color:#F0F0F0">
              <th style="width: 90px">{{ $t('attendance.memberName') }}</th>
              <th v-for="index of monthDays" :key="'th_'+index" style="width: 30px">
                {{ index }}
                <br />
                {{ ui_getWeekStr(index) }}
              </th>
              <th style="width: 100px">{{ $t('attendance.needattendanceHours') }}</th>
              <th style="width: 100px">{{ $t('attendance.accuattendanceHours') }}</th>
              <th style="width: 100px">{{ $t('attendance.accumulatedLatenesshourstimes') }}</th>
              <th style="width: 100px">{{ $t('attendance.accumulatedEarlyLeavehourstimes') }}</th>
              <th style="width: 100px">{{ $t('attendance.timesOfCardShortage') }}</th>
              <th>{{ $t('attendance.accumulatedOvertimehours') }}</th>
            </tr>
          </thead>
          <tbody>
            <li v-if="tableData.length>0">
              <tr v-for="(value, key, index) in tableData" :key="'data_'+index">
                <td style="width: 90px;align:center"><a style="color:blue;" @click="evt_openMember(value)">{{ value.memberName }}</a></td>
                <td v-for="i of monthDays" :key="'td_'+i" class="d" style="width: 30px">
                  <div
                    v-if="value['state0_'+i]&&value['state0_'+i]>0"
                    style="background-color:red"
                  >X{{ value['state0_'+i] }}</div>
                  <div
                    v-if="value['state2_'+i]&&value['state2_'+i]>0"
                    style="background-color:Magenta"
                  >L{{ value['state2_'+i] }}</div>
                  <div
                    v-if="value['state3_'+i]&&value['state3_'+i]>0"
                    style="background-color:orange"
                  >E{{ value['state3_'+i] }}</div>
                  <div
                    v-if="value['state0_'+i]==0&&value['state2_'+i]==0&&value['state3_'+i]==0"
                    style="background-color:green"
                  >√</div>
                </td>
                <td style="width: 100px">{{ value.totalAttendance }}</td>
                <td style="width: 100px">{{ value.absenceNums }}</td>
                <td style="width: 100px">{{ value.arrNums }}/{{ value.arrTime }}</td>
                <td style="width: 100px">{{ value.depNums }}/{{ value.depTime }}</td>
                <td style="width: 100px">{{ value.cardNums }}</td>
                <td>{{ value.overTime }}</td>
              </tr>
            </li>
            <li v-else>
              <tr><td :colspan="monthDays+7">{{ $t('common.querynodata') }}</td></tr>
            </li>
          </tbody>
        </table>
      </div>

.monTbale {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  font-size: 0.6em;
  text-align: center;
  width: 100%;
     tr {
       display: table;
       width: 100%;
       table-layout: fixed;
       word-wrap:break-word;word-break:break-all;
       text-align:center;
       vertical-align:middle;
          th,td {
             border-bottom: 1px solid #ccc;
             border-right: 1px solid #ccc;
             height: 40px;
               }
          }

       .d{
          font-size: 0.6em;
         }
      }

.monTbale tbody {
display: block;
height: 600px;
overflow-y: scroll;
}

.monTbale thead {
width: calc( 100% - 1em );
}

我是参考了这位大兄的博客，在此感谢。

https://www.cnblogs.com/peter1/p/8888714.html