CSS設定table下tbody的滾動條
阿新 • • 發佈:2019-02-14
今天碰到一個關於對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;}