Table實現表頭固定 內容滾動

2022-07-08 20:18:18 字數 437 閱讀 2791

序號內容

1我只是用來測試的

2我只是用來測試的

3我只是用來測試的

4我只是用來測試的

.table-head

.table-body

.table-head table,.table-body table

.table-body table tr:nth-child(2n+1)

其實關鍵之處在於

1、使用了colgroup標籤,來對上下兩個**的列寬進行了定義,讓他們保持一致。

2、上邊的div .table-head新增了樣式padding-right:17px,這個寬度是為了保證跟下邊的div .table-body的滾動條保持一致,同時下邊的**.table-body新增了樣式overflow-y:scroll;

table固定表頭滾動

一 table固定表頭滾動 不相容ie 使用scrolltop監聽滾動 如下例 1 html div class tabflow id flowtable cont table thead tr th 年度 th th 起降架次 萬架 th th 旅客吞吐 萬人 th th 貨郵吞吐 萬噸 th t...

固定表頭 滾動內容

以前自己學習做web專案時,好像涉及到 內容較多的時候都是每頁固定行數,然後分頁,不過實際專案中可能在分頁的基礎上會有 固定表頭 滾動內容 這種需求,目前參與的專案中就是這樣的,看了這種實現,感覺很不錯。看了看同事寫的樣式 其實很簡單,用div套在table外面,設定overflow auto,然後...

table固定表頭

html中table樣式固定表頭,下面的內容滾動 html 終端sn號 會員名稱 會員 繫結狀態 啟用狀態 入庫時間 終端sn號 會員名稱 會員 繫結狀態 啟用狀態 入庫時間 終端sn號 會員名稱 會員 繫結狀態 啟用狀態 入庫時間 終端sn號 會員名稱 會員 繫結狀態 啟用狀態 入庫時間 終端sn...