table表頭固定問題

看風景就發表於2018-07-27

table表頭固定問題

原生的table表頭在表格滾動時候無法固定，可以使用以下的方法進行模擬

1. 雙table法

表頭和表體各用一個table，這樣會產生表格列對不齊的問題，可以使用colgroup和col來對齊，或者直接設定th，td的寬度

2. 單table修改樣式方法

設定表格體為display:block，表格head和表格body的行都是display:table

.tb tbody{display:block;height:300px;overflow:hidden;overflow-y:scroll;}
.tb thead,.tb tbody tr{
    display:table;width:100%;table-layout:fixed;
}

 

參考: https://blog.csdn.net/hualele/article/details/52993315
　　  https://blog.csdn.net/qq_36340642/article/details/79353179

相關文章