關於固定表頭的一種方式

2021-10-24 06:41:10 字數 1269 閱讀 5665

關於固定表頭的一種方式

對於固定表頭可以通過css的固定定位來實現
position

: fixed;

但是一旦表頭被固定定位修飾之後會帶來兩個問題:

1.表體不依據表頭定位,而是通過上一層div進行定位,導致表體中前面的部分資料會被表頭遮擋。

2.表頭的長度不受標準文件流約束,導致表頭與表體的單元格不對齊。

解決問題1:

我們可以通過在表體上方新增乙個與表頭高度相等的一行,來將表體擠下來。而表頭將這新新增的一行覆

蓋 ,達到固定表頭的效果。

解決問題2:

我們可以獲取表體每乙個單元格的長度,通過js來修改表頭單元格的長度。來達到表頭與表體單元格對其

的效果。

css:

js:

$

(function()

);

jsp:

>

>

>

"thnumber"

>

序號td

>

"thuservalue"

>

姓名td

>

"thtime"

>

日期td

>

"thenergy"

>

金額td

>

tr>

thead

>

"spacetr"

>

"tdnumber"

>

td>

"tduservalue"

>

td>

"tdtime"

>

td>

"tdenergy"

>

td>

tr>

>

>

>

.....td

>

>

.....td

>

>

.....td

>

>

.....td

>

tr>

tbody

>

table

>

這樣就可以實現表頭固定的需求了,如果大神們有更好的實現方式,可以指點一哈。

用最簡單的方式固定表頭 固定首列

主要思想就是用多個table拼湊成乙個table造成固定的假象,話不多說直接上 以下 主要是控制 樣式 以下 是重點啦,乙個 只有thead,另乙個 只有tbody 123 456 下面是建立tbody的tr和td,可忽略不看 實現效果圖如下 如果你想簡單實現固定表頭,以上 已經可以做到啦,但是以上...

關於android中一種簡單的分享方式

目前第三方分享方式有兩種 優點 無縫整合,功能多 缺點 整合官方sdk包進行開發,且需要申請官方的授權 優點 及其簡單,不需要sdk和官方授權 這裡我介紹下第二種分享方式,這種分享方式在應用寶和android版百變相機中有應用。典型的 如下 override public void onclick ...

table關於固定表頭得一些 BUG

問題描述 網上有很多固定表頭得方法 無非就是表頭和表主體分成兩個 表主體用乙個div包住overflow scroll 然後在表頭給個padding值 會預設出現滾動條,高度夠也會出現,這樣也會對頁面得美觀造成影響!這樣無法做到自適應!現在我需要達到得效果是,滾動條出現自適應,表頭和表主體寬度能實時...