在开发XX车站信息系统时，需要将大量数据显示在一个巨大的表格内部，由于表格是一个整体，无法分页，加之数据很多，超出一屏，为了方便用户，决定使用固定表头的插件，经过测试，发现JQuery 插件：fixedtableheader可以简单方便的实现功能。
它的使用很简单，需要设置的参数也只需2个，很实用。
使用方法：
//引入文件
使用时，我发现js文件只有 4KB，我很好奇它是怎么实现的，于是就有了下文。
大致原理是：创建一个绝对定位的table，只包含表头。当表格被用户拖动超出屏幕时，表头表格显示；表格正常显示时，表头表格隐藏。
/* Copyright (c) 2009 Mustafa OZCAN (http://www.mustafaozcan.net) * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * Version: .0.2 * Requires: jquery.1.3+ */ jQuery.fn.fixedtableheader = function(options) { var settings = jQuery.extend({ //jQuery.extend( target [, object1 ] [, objectN ] ) headerrowsize: 1, //这是默认参数 highlightrow: false, highlightclass: "highlight" }, options); //用户设置的参数 //如果用户设置参数，会覆盖对应的默认参数 this.each(function(i) { //处理每个table（该插件使用class属性绑定，会存在多个table） var $tbl = $(this); var $tblhfixed = $tbl.find("tr:lt(" + settings.headerrowsize + ")"); //找到要固定表头tr var headerelement = "th"; if ($tblhfixed.find(headerelement).length == 0) headerelement = "td"; //没有th，默认td为表头单元格 if ($tblhfixed.find(headerelement).length > 0) { //有th单元格 $tblhfixed.find(headerelement).each(function() { $(this).css("width", $(this).width()); //设置表头th宽度 }); var $clonedTable = $tbl.clone().empty(); //创建表头表格，即一对完整的table标签 var tblwidth = GetTblWidth($tbl); $clonedTable.attr("id", "fixedtableheader" + i).css({ //设置悬浮表头绝对定位的位置 "position": "fixed", "top": "0", "left": $tbl.offset().left //.offset(): 获取表格的左边距 }).append($tblhfixed.clone()).width(tblwidth).hide().appendTo($("body")); //将表头插入table标签中 if (settings.highlightrow) //鼠标移过高亮 $("tr:gt(" + (settings.headerrowsize - 1) + ")", $tbl).hover(function() { $(this).addClass(settings.highlightclass); }, function() { $(this).removeClass(settings.highlightclass); }); $(window).scroll(function() { //当滚动条发生变化时触发scroll事件 if (jQuery.browser.msie && jQuery.browser.version == "6.0") //IE6.0 $clonedTable.css({ // "position": "absolute", "top": $(window).scrollTop(), "left": $tbl.offset().left }); else $clonedTable.css({ "position": "fixed", "top": "0", "left": $tbl.offset().left - $(window).scrollLeft() }) var sctop = $(window).scrollTop(); //页面滚动条向下滚动的高度，也即页面被隐藏的高度 var elmtop = $tblhfixed.offset().top; //此时原始表格距离浏览器客户区顶端的高度 if (sctop > elmtop && sctop <= (elmtop + $tbl.height() - $tblhfixed.height())) $clonedTable.show(); //原来的表头被滚动的不可见并且表格主体尚未被滚动出屏幕 else $clonedTable.hide(); // }); $(window).resize(function() { if ($clonedTable.outerWidth() != $tbl.outerWidth()) { //若悬浮表跟不上resize的变化 $tblhfixed.find(headerelement).each(function(index) { //重新设置悬浮表头clonedTable每个th/td的宽度 var w = $(this).width(); $(this).css("width", w); $clonedTable.find(headerelement).eq(index).css("width", w); }); $clonedTable.width($tbl.outerWidth()); //设置悬浮表的宽度，注意这里.width()和css('width')的区别 } $clonedTable.css("left", $tbl.offset().left); //jquery中offset是相对于浏览器客户区的相对偏移 }); } }); function GetTblWidth($tbl) { //获取元素宽度（包括padding和border） var tblwidth = $tbl.outerWidth(); return tblwidth; } };
在注释该代码过程中，一个很严重的疑惑产生了：
JQuery的.width() 和 CSS width 貌似不统一，有很大区别！所以又细细深入研究了一番，收获详见。
IE6不能使用position:fixed，具体见。
后记：2014-06-17
其实这个根本就达不到所谓的“fixtableheader”的效果，因为它只是简单的额把所有的表头都固定在了浏览器客户区的顶部，而非是table所在区域的顶部。