table中的標題行凍結的簡單實現

2021-09-06 21:50:11 字數 1170 閱讀 6236

這裡只是簡單的實現,主要是用了position屬性的fixed屬性值,這個屬性值需要高版本瀏覽器的支援,如果要相容低版本的瀏覽器可以通過寫指令碼的方式實現,也可以使用ui庫,有些ui庫裡面**外掛程式的標題行都是凍結的。這裡只介紹使用fixed的方法:

class="

freezediv

" style="

width: 400px; height: 140px; overflow: auto;border:1px solid gray

">

"freezedivtable

" cellpadding="

0" cellspacing="

0">

"fixtr

" style="

position: fixed; background-color:yellow;

">

"width: 60px

">序號

"width: 60px

">內容

序號

內容"width: 60px

">1"

width: 60px

">內容1

2 內容2

3 內容3

4 內容4

5 內容5

6 內容6

7 內容7

8 內容8

9 內容9

10 內容10

11 內容11

12 內容12

13 內容13

14 內容14

15 內容15

16 內容16

17 內容17

18 內容18

19 內容19

20 內容20

Table標題行凍結,資料行滾動的一種方式

這段時間在做table標題行凍結,資料行滾動,雖然能實現,但也遇到一些問題,記錄下來。首先說說實現,實現其實不難,估計很多人都能想象出來,那就是標題行與內容行分離。我是這麼做的,用兩個 乙個只有thead,乙個只有tbody,兩個 的列數量是完全相等的,而且相同的列寬度完全相等。這樣兩個 合併在一起...

刪除Table表中的重複行的方法

利用sql server 2005的新功能now number和cte可以很好的實現.舉例說明如下 建立測試資料 複製 如下 create table dup1 col1 int null,col2 varchar 20 null insert into dup1 values 1,aaa 2,aa...

簡單的建立table

語法 create table database name.owner owner.table name 指定列名稱,型別 collate 指定排序規則 default constant expression 指定預設值 identit seed,increment not for replicat...