[ CSS ] – Table Thead Fixed 資料表 表頭固定

找了好久終於找到一個可視性最好的解法 Table Thead Fixed 這個需求只要是有資料報表就一定會用到，之前的作法 https://www.webteach.tw/?p=701 資料項目少的時候還可以用，但只要一多還是會跑版。
最近搜尋到這篇 https://www.cnblogs.com/webSong/p/6242444.html 經測試可視性好太多了，雖然在處理 colspan 欄位時還是會小跑版但還在可接受的範圍。
備份一下語法
[css]
<style>
table tbody {
display:block;
height:400px;
overflow-y:scroll;
}
table thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
table thead {
width: calc( 100% – 1em )
}
table thead th{ background:#ccc;}
</style>
[/css]

Xilla 露營 戶外 大力夾雲台手機支架 拓展支架 球型雲台夾 手機架

味丹 隨緣 鮮蔬百匯/素肉骨茶/素魷魚羹麵/韓式泡菜/麻辣燙湯麵 (5包/袋) 素食 全素 泡麵

維力 素飄香 野菜多 素排骨雞 素紅燒牛肉 麻辣燙 麻油當歸枸杞 蔘湯麵 素食 泡麵 單包

好滋味御品／麻油猴頭菇