table的表頭固定,內容可捲動的解法

參考文章:HTML table 表格 thead 表頭固定,tbody 滾動

css解法可用,以下是改良,他原本用 > 主要是避免表格內又包表格。但我需要用捲軸的通常不會再包表格,所以可以直接用空格就好。

thead tr{
display: table;
width: 100%;
table-layout: fixed;
}
tbody{
display: block;
height: 271px;
overflow-y: scroll;
}
tbody tr{
display: table;
width: 100%;
table-layout: fixed;}

然後table-layout的說明看這篇:善用 CSS 中的 table-layout 屬性加快 Table 的顯示速度

裡面提到
「CSS 的 table-layout 屬性有兩個可以設定的值:
automatic 表格的總寬度決定於每一個儲存格(Cell)的最大值。( 此為預設值 )
fixed 表格的總寬度決定於表格 width 屬性的定義,以及各欄位(Column) width 屬性的定義」

簡單來說預設值 automatic  要整個表格讀完,瀏覽器才能確認總寬度。
fixed 代表如果你有定義寬,那就直接用定義的寬度。

所以後者顯示速度會比較快。這個有沒有加不影響上述css把表格變成有捲軸。但可以加快網頁成像的速度。

然後讓表格底下有捲軸而且正常顯示的關鍵是要針對tr下 display: table;跟width: 100%;

感覺應該是把tr模擬成表格

總之真的是蠻神奇的設定,可以用就對了。