table 固定首列

2021-09-12 08:54:58 字數 711 閱讀 7086

首先,table外層套兩層div,outerdiv和 innerdiv

名稱

性別班級

語文數學

合計 張三男

28090170

李四男2

8090

170

outerdiv和innerdiv的樣式設定如下:

.outerdiv

.innerdiv

設定table的樣式:

注: 第一列position設為absolute

.table

.thead

.thead tr

.tbody

.tbody tr td

.tbody tr td:nth-child(1),.thead_f th:nth-child(1)

.table th:first-child, .table td:first-child

ps:重要的一點,為了保證固定列高度和其他高度保持一致,需要遍歷沒一行,判斷高度,並設定

$('.table td:first-child').each(function() else if (td_height < tr_height) 

});

table固定表頭和首列

html部分,結構上分為左右兩部分,又分別拆開為上下兩部分,總共四個結構部分,以下為固定首行和首列,需要固定多行多列的可以自行新增,如下列表中姓名為左上角固定不變的位置,可自行新增多個。class container id left div id left div1 id left table1 c...

css js簡單實現table固定首行首列

使用easyui等都可以實現table固定首行首列的功能。但僅僅只需要這乙個功能,完全可以用css js簡單實現而不用引入更多工具。網上找到很多的思路,自己對其中比較簡單的乙個進行了整理。如上圖 1 整個頁面分成 左右 兩部分 2 左邊分為 上下 兩部分 3 右邊分為 上下 兩部分 紅色框比較特殊,...

GridView固定表頭和首列

當gridview中要顯示的資料非常多的時候,使用者常需要開發人員固定表頭或是首列,以保證在拖動滾動條的時候,可以清楚得了解到每一列或行的內容。借助於css的功能,可以將gridview打造成這樣的 首先,要把gridview放在乙個容器中,然後在頁面中新增如下css fixedheader fix...