TABLE 多表頭固定問題(基本jquery外掛程式)

2021-08-27 19:43:16 字數 1605 閱讀 8035

在這個外掛程式的使用中,部分網友反應有兩個問題:

1>單元格內容很長時,會出現布局問題;

2>固定的表頭,有時與下面的tbody中的元素不能對齊

解決方法:

1>第乙個問題實際就是單元格自動換行的問題,可以用下面的方法解決(但僅ie下通過),加入css

table tbody td

並在呼叫時傳入tablelayout="fixed",採用固定的table布局方案。

2>第二個問題,試過很多種方法,最穩定的方法是在頁面載入完後,將原來的表頭td寬度賦給新的固定表頭,**詳見外掛程式源**

1 業務要求:

固定table的表頭,當垂直滾動時,表頭位置不變,始終可見;

2 存在的問題:

網上很多的例子都是針對於單行的表頭,如果是多表頭,並且td有rowspan在ie下會出現下面的情況(如果您遇到的是多表頭td在固定時出現跨行顯示的問題,這篇文章適合您)

[img]

3 解決方法:

寫了乙個jquery外掛程式來解決這個問題,主要思想是:

1>將原有的table中的thead元素複製乙份放在乙個新的div(fixedheadwrap)中

2>設定這個fixedheadwrap為絕對位於原來的table的thead位置

5實現要點

1>table表頭元素要放在中

2>table外面需要包一層div

3>執行後發現表頭與資料行不對齊,需要調整一下**中元素的寬度。可以嘗試傳入tablelayout屬性(因為樣式問題多種多樣,不能保證有用)。

6 示例(在ff和ie8下測試通過)

專案常規性稅金

非常規性稅金

工程稅城建稅

教育費附加%

堤圍防護費%

個人所得稅%

0.211111111111111111.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

0.20.2

table表頭固定問題

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

table固定表頭

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

固定table的表頭

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