基于jquery的表头固定的若干方法_jquery-js教程-PHP中文網

A:使用JQuery UI插件，用DIV替换table，overflow-y:hidden达到滚动，让 thead绝对定位达到固定的目的，方法如下：

');
$(".scrolling_outer").css({'position':'relative'});
$("#"+$uniqueID).css(
{'border':'1px solid #CCCCCC',
'overflow-x':'hidden',
'overflow-y':'auto',
'padding-right':'17px'
});
$("#"+$uniqueID).css('height', options.height);
$("#"+$uniqueID).css('width', options.width);
$(this).before($(this).clone().attr("id", "").addClass("_thead").css(
{'width' : 'auto',
'display' : 'block',
'position':'absolute',
'border':'none',
'border-bottom':'1px solid #CCC',
'top':'1px'
}));
$('._thead').children('tbody').remove();
$(this).each(function( $this ){
if (options.width == "100%" || options.width == "auto") {
$("#"+$uniqueID).css({'padding-right':'0px'});
}
if (options.scrolling == "no") {
$("#"+$uniqueID).before('Expand table');
$("#"+$uniqueID).css({'padding-right':'0px'});
$(".expander").each(
function(int){
$(this).attr("ID", int);
$( this ).bind ("click",function(){
$("#"+$uniqueID).css({'height':'auto'});
$("#"+$uniqueID+" ._thead").remove();
$(this).remove();
});
});
$("#"+$uniqueID).resizable({ handles: 's' }).css("overflow-y", "hidden");
}
});
$curr = $this.prev();
$("thead:eq(0)>tr th",this).each( function (i) {
$("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width());
});
if (options.width == "100%" || "auto"){
$(window).resize(function(){
resizer($this);
});
}
});
};
function resizer($this) {
$curr = $this.prev();
$("thead:eq(0)>tr th", $this).each( function (i) {
$("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width());
});
};
})(jQuery);

页面调用如下：

复制代码代码如下:

 
... 
 
<script> <BR>$(function(){ <BR>$("#yourTableID").chromatable({ <BR>width: "900px", <BR>height: "400px", <BR>scrolling: "yes" <BR>}); <BR>}); <BR></script> 
... 

... 

  Check out this header Look here's another one Wow, look at me! 
  Some content goes in here Praesent vitae ligula nec orci pretium vestibulum Maecenas tempus dictum libero 
 Quisque in wisi quis orci tincidunt fermentum Mauris aliquet mattis metus Etiam eu ante non leo egestas nonummy

Check out this header	Look here's another one	Wow, look at me!
Some content goes in here	Praesent vitae ligula nec orci pretium vestibulum	Maecenas tempus dictum libero
Quisque in wisi quis orci tincidunt fermentum	Mauris aliquet mattis metus	Etiam eu ante non leo egestas nonummy

此方法IE和FF的兼容性都很好，推荐。
B：利用css滤镜实现，但FF不支持微软的东西，不兼容。DOM如下：

复制代码代码如下:

New Document

	列头		列头		列头
h1	h2	h3	h4	h5	h6	h7
a	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
b	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
c	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7