今天碰到一個關於對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;}