固定表头的table

　　在前端的开发过程中，表格时经常使用的一种展现形式。在我的开发过程中，当数据过多时，最常用的一种方式就是分页，但是有些地方还是需要滚动。通常的table 会随着滚动，导致表头看不见。一下是我找到的一种固定表头的方法。代码如下：

div class="t_head">
          <table class="table_style">
            <caption class="tableTitle stateLegend">
              <span class="epgDate l" v-html="epgDate"></span>
              <span class="l">频道列表</span>
              <ul>
                <li v-for="(item,index) in programType" :key="index" @click="screenChannelList(item)">
                  <span class="legend"></span>
                  <span class="legendName"> {{item.type}}</span>
                </li>
              </ul>
            </caption>
            <thead>
              <tr>
                <th width="30%">编号</th>
                <th width="30%">名称</th>
                <th width="30%">出现位置</th>
                <th width="10%">操作</th>
                <th></th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="t_body scroll_live" v-if="isChannel">
          <table class="table_style">
            <tbody>
              <tr v-for="(channel,index) in liveEpgList" :key="index" @click="getLookBackEpgList(channel.channelID,channel.channelName);"
                class="trHover" :class="[index%2 ? 'TRlight' : 'TRdark',{'hidden' : channel.location == 2 && changeItem =='隐藏'},{'add':channel.changeType == 0},{'offline':channel.changeType == 1},{'trIsClick' : alreadyChooseNum == channel.channelID} ]">
                <td width="30%" :title="channel.channelID">{{channel.channelID}}</td>
                <td width="30%" :title="channel.channelName">{{channel.channelName}}</td>
                <td width="30%" :title="channel.location ==2?'隐藏':'可见'" v-html="channel.location ==2?'隐藏':'可见'"></td>
                <td width="10%"><div  class="deal" @click.stop="dealChannelAbnormal(channel)">处理</div></td>
              </tr>
            </tbody>
          </table>
        </div>

.t_head {
  width: 100%;
  height: 71px;
}

.t_body {
  width: 100%;
  height: calc(100% - 72px);
  overflow-y: auto;
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
}