前段時間做專案時候由於需要顯示乙個列表，但是由於資料太多在滾動的時候表頭必須凍結住，所以就寫了下面這個指令碼（曾經在網上也找過相應的指令碼，但是不怎麼理想所以就自己寫了，但是目前由於專案僅僅用到了表頭的凍結，而不需要指定列凍結所以目前只能算個不完整的指令碼，不過一般的僅僅需要表頭凍結就可以使用了），現在先看看截圖：
這樣實現了表頭的凍結，下面表體內容可以自由滾動
看下**：
//為jquery擴充套件乙個clonetableheader 方法
jquery.fn.clonetableheader = function(tableid, tableparentdivid)
var browserversion = parsefloat(ver.substring(ver.indexof("msie") + 5, ver.lastindexof("windows")));
var content = document.getelementbyid(tableparentdivid);
var scrollwidth = content.offsetwidth - content.clientwidth;
var tableorg = jquery("#" + tableid);//獲取表內容
var table = tableorg.clone();//轉殖表內容
table.attr("id", "clonetable");
//注意:需要將要凍結的表頭放入thead中
var tableheader = jquery(tableorg).find("thead");
var tableheaderheight = tableheader.height();
tableheader.hide();
var colswidths = jquery(tableorg).find("tbody tr:first td").map(function() );//動態獲取每一列的寬度
var tableclonecols = jquery(table).find("thead tr:first td")
if (colswidths.size() > 0) else
} }
//建立凍結表頭的div容器,並設定屬性
var headerdiv = document.createelement("div");
jquery(headerdiv).css("height", tableheaderheight);
jquery(headerdiv).css("overflow", "hidden");
jquery(headerdiv).css("z-index", "20");
jquery(headerdiv).css("width", "100%");
jquery(headerdiv).attr("id", "tableheaderdiv" + tableid);
jquery(headerdiv).insertbefore(tableorg.parent());
}
只需在頁面中加入以下指令碼?
12
3
4
5
這樣就可以了,傳入表和表所在的div的id就ok了,必須注意的是:要凍結的表頭必須放入到thead中,否則無法實現凍結。
以上**在ie6,7,8測試通過，ff和chrome會出現表頭的寬度不準確的問題。
kyo-yo
出處：
css實現table鎖定表頭
在做專案中，碰到 資料全部載入，不要分頁，就需要鎖定表頭的業務。自己也上網搜了一些資料，1.css html實現 一般的思路就是兩個table拼接，不過問題是上下表單可能對不齊 2.js實現 一般的思路是重新建立表頭，表頭浮動 在這裡css html實現 css html實現固定表頭title ty...
鎖定表頭和表頭排序
效果圖如上，如下 content 是最終返回所有資料的陣列。sum salesamount sort 和 sum scount sort 是所有只有零售額和零售量的陣列。session cross border channel table2 content session cross border ...
PHPExcel凍結（鎖定）表頭的使用方法
phpexcel是一款功能比較強大的操作微軟excel的php外掛程式，在匯出資料時為了方便檢視，有時需要鎖定表頭，也就是在滾動檢視資料時，表頭始終出現在視野中，而不會消失。呼叫方法如下 objphpexcel new phpexcel objphpexcel setactivesheetindex...