实现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>

 更多内容请关注

标签：滚动,表体,tr,tbody,表头,width,table
来源： https://blog.csdn.net/weixin_42981560/article/details/122596840