今天碰到一个关于对tabel的表的滚动事件,需求是表头不动,改变的是tbody,如果tbody里面的内容过多,让其进行滚动事件。
首先想到的就是利用css中overflow-y:scroll; 来进行内容的滚动,但是在处理tabel的display状态时,就将tabel表的布局给打乱了,如果给tabel的父级进行限制,则这个表会进行滚动。。。
在css上设置如下代码就可以了
table tbody {display:block;height:200px;overflow-y:scroll;-webkit-overflow-scrolling: touch; // 为了滚动顺畅 }table tbody::-webkit-scrollbar {display: none; // 隐藏滚动条}table thead, tbody tr {display:table;width:100%;table-layout:fixed;}table thead {width: calc( 100% - 1em )}table thead th{ background:#ccc;}