常用的固定表頭的幾種做法

2021-04-08 13:24:06 字數 1048 閱讀 9342

這幾天修改列表的樣式風格,提到了列表表頭的固定方法,總結一下常見的幾種:

第一種感覺最簡單的就是分放在兩個標籤裡,這樣只控制不含有標題的那個,**如下:

標題一標題二

標題三標題四12

3412

3412

3412

3412

3412

3412

3412

3412

3412

3412

3412

3412

3412

3412

3412

34

第二種不是很靈活,但是也比較簡單,就是通過乙個層來進行處理,將放入層中,**如下:

標題一標題二

標題三標題四12

3412

3412

3412

3412

3412

3412

3412

3412

3412

3412

3412

3412

3412

3412

3412

34

從以上**可以看出,第二種不太方便的地方就是有乙個id限制,給我的感覺就不是很舒服,但的確是非常的簡單易用。

第三種也不是很麻煩,不使用id,但是這個代價卻是通過增加乙個層()的代價換來的,這時其中層的寬度設定就成為了關鍵。可以看一下源**,如下:

標題一標題二

標題三標題四12

3412

3412

3412

3412

3412

3412

3412

3412

3412

3412

3412

3412

3412

3412

3412

34

使用第三種方法時要特別注意:

最外邊的層中設定的寬度,僅僅為顯示整個列表的寬度,高度也是如此。裡面的層()中的寬度一定要和**的寬度一致,例如此處為300。否則就會出現不對應的現象。

固定table的表頭

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

固定表頭的table

在前端的開發過程中,時經常使用的一種展現形式。在我的開發過程中,當資料過多時,最常用的一種方式就是分頁,但是有些地方還是需要滾動。通常的table 會隨著滾動,導致表頭看不見。一下是我找到的一種固定表頭的方法。如下 div class t head table class table style c...

html table css 實現固定表頭的辦法

最近做到了要實現固定表頭的乙個資料列表table,在網上查了一些資料,總結出的辦法,望大家提出建議或意見。其原理大概如下 將tbody用乙個固定高度的div包起來,並使tbody的內容高度超過這div的高度,這樣便會出現滾動條。同時因為要求表頭固定,所以用另外乙個table將表頭寫出來,但是要注意的...