页面布局实现局部的tbody部分竖向滚动条实现

实际业务需求:实现表格内容的部分内容的滚动

具体实现如图,时间以上部分不会滚动,具体记录实现超过5条进行滚动
代码
页面布局

<table>
     <tr class="hasTh">
         <td>时间</td><td>奖品</td><td>领取情况</td>
     </tr>
     <tbody class="award-tbody">
         <tr  v-for="(item, index) in awardList" :key="index">
             <td>{{item.join_time | filterTime}}</td>
             <td>{{item.name}}</td>
             <td>
                 <p v-if="item.property == '虚拟奖品' || (item.property == '实物奖品'&&item.is_get==true)"  @click="ToDeatilAward(index,item.join_id,item.property)" data  :class="[current_item === index?'cativeLook':'','toAwardMore']">点击查看</p>
                 <p v-if="item.property == '实物奖品'&&item.is_get==false"  @click="ToDeatilAward(index,item.join_id,item.property)" data  :class="[current_item === index?'cativeLook':'','toAwardMore']">点击领取</p>
             </td>
         </tr>                            
     </tbody>
</table>

css实现滚动条,未进行各浏览器兼容,主要是谷歌浏览器
注意tbody要display: block;不然不能实现

   .award-tbody{
       display: block;
       width: 450px;
       max-height: 260px;
       overflow-y: scroll;
   }

如果需要隐藏滚动条

  .award-tbody::-webkit-scrollbar {
     width:0px;
     height:0px;
  }

在进行tbody的添加一个,每行和每个td,都要单独设置宽度,高度,不然原本的width:100%;样式会崩掉