0
点赞
收藏
分享

微信扫一扫

实现table 表体tbody滚动 表头不滚动

实现table 表体tbody滚动 表头不滚动

以前试过很多办法都是不怎么理想

以下方法可以效果体验感觉是比较好的

<div class="w-100" style="overflow-y: auto;overflow-x: auto;max-height: 300px;" >
<table border="1" cellspacing="" cellpadding="" class="w-550 m-t-10 tc" v-if="item.show">
<thead>
<tr class="bg-307-01 l-h-30"><th>仓库</th><th>批号</th><th>数量</th><th>件数</th> <th>有效期至</th></tr>
</thead>
<tbody >
<tr v-for="waresitem in 10000" >
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
</tbody>
</table>
</div>


<style>

table tbody {
display:block;
max-height:230px;
overflow-y:scroll;
overflow-x:hidden;
}
/* ::-webkit-scrollbar {
width: 1px;
} */
table thead,tbody tr,tfoot tr,thead tr {
display:table;
width:100%;
table-layout:fixed;
}
</style>


 


举报

相关推荐

0 条评论