首先,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...