table中head表頭固定,body滾動

2022-03-03 12:16:39 字數 1069 閱讀 2709

**:

序號內容

1我只是用來測試的

2我只是用來測試的

3我只是用來測試的

4我只是用來測試的

5我只是用來測試的

6我只是用來測試的

7我只是用來測試的

8我只是用來測試的

9我只是用來測試的

10我只是用來測試的

11我只是用來測試的

12我只是用來測試的

13我只是用來測試的

14我只是用來測試的

15我只是用來測試的

下面是css樣式

.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 ;

以上方法試了後,發現有時會出現寬度不對齊的問題,當然了可以設定每個th td的寬度就可以修改這個問題了,但是

我覺得因為還是用了2個table的原因吧,覺得還是好複雜,所有就重新查詢了一下,發現還真有好的解決方法:

乙個table中thead  tbody就可以了。

table tbody 

table thead, tbody tr

table thead

/*firefox*/

-moz-calc(expression);

/*chrome safari*/

-webkit-calc(expression);

/*standard */

calc();

這樣就可以了,這是我看到的,試了試,可以實現。

table固定表頭

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

固定table的表頭

原貼 另可參考 根據固定表頭的兩種方式 固定表頭兩種方式 1.表頭和表內容分別在兩個table中,互不干擾.優點 實現簡單 缺點 兩個table 的列寬不好保持一致,缺乏靈活性 2.用標籤的屬性來處理 html view plain copy span style font size 18px ht...

table表頭固定問題

table表頭固定問題 原生的table表頭在 滾動時候無法固定,可以使用以下的方法進行模擬 1.雙table法 表頭和表體各用乙個table,這樣會產生 列對不齊的問題,可以使用colgroup和col來對齊,或者直接設定th,td的寬度 2.單table修改樣式方法 設定 體為display b...