基于jquery的表头固定的若干方法

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

复制代码代码如下:

　　(function($){

　　$.chromatable = {

　　defaults: {

　　width: "900px",

　　height: "300px",

　　scrolling: "yes"

　　}

　　};

　　$.fn.chromatable = function(options){

　　var options = $.extend({}, $.chromatable.defaults, options);

　　return this.each(function(){

　　var $this = $(this);

　　var $uniqueID = $(this).attr("ID") + ("wrapper");

　　$(this).css('width', options.width).addClass("_scrolling");

　　$(this).wrap('<div class="scrolling_outer"><div id="'+$uniqueID+'" class="scrolling_inner"></div></div>');

　　$(".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('<a href="#" class="expander" style="width:100%;">Expand table</a>');

　　$("#"+$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);

　　页面调用如下：

复制代码代码如下:

　　...

　　$(function(){

　　$("#yourTableID").chromatable({

　　width: "900px",

　　height: "400px",

　　scrolling: "yes"

　　});

　　</script>

　　...

　　<thead>

　　<tr>

　　<th>Check out this header</th>

　　<th>Look here's another one</th>

　　</tr>

　　</thead>

　　<tbody>

　　<tr>

　　<td>Some content goes in here</td>

　　<td>Praesent vitae ligula nec orci pretium vestibulum</td>

　　<td>Maecenas tempus dictum libero</td>

　　</tr>

　　...

　　<tr>

　　<td>Quisque in wisi quis orci tincidunt fermentum</td>

　　<td>Mauris aliquet mattis metus</td>

　　<td>Etiam eu ante non leo egestas nonummy</td>

　　</tr>

　　</tbody>

　　</table>

　　此方法IE和FF的兼容性都很好，推荐。

　　B：利用css滤镜实现，但FF不支持微软的东西，不兼容。DOM如下：

复制代码代码如下:

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

　　<HTML>

　　<HEAD>

　　<TITLE> New Document </TITLE>

　　</HEAD>

<!--

　　body,table, td, a {font:9pt;}

　　/*重点：固定行头样式*/

　　.scrollRowThead{position: relative; left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);

　　z-index:0;}

　　/*重点：固定表头样式*/

　　.scrollColThead {position: relative;top: expression(this.parentElement.parentElement.parentElement.scrollTop);z-index:2; height:20px;}

　　/*行列交叉的地方*/

　　.scrollCR { z-index:3;}

　　/*div外框*/

　　.scrollDiv {height:200px;clear: both; border: 1px solid #EEEEEE;OVERFLOW: scroll;width: 500px; }

　　/*行头居中*/

　　.scrollColThead td,.scrollColThead th

　　{ text-align: center ;}

　　/*行头列头背景*/

　　.scrollRowThead,.scrollColThead td,.scrollColThead th

　　{background-color:EEEEEE; height:20px;}

　　/*表格的线*/

　　.scrolltable{

　　border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; }

　　/*单元格的线等*/

　　.scrolltable td,.scrollTable th{

　　border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; padding: 5px; }

　　-->

　　</style>

　　<BODY>

　　</tr>

　　</tr>

　　<tr>

　　a</td>

　　</tr>

　　<tr>

　　b</td>

　　</tr>

　　<tr>

　　c</td>

　　</tr>

　　<tr>

　　d</td>

　　</tr>

　　<tr>

　　e</td>

　　</tr>

　　<tr>

　　f</td>

　　</tr>

　　<tr>

　　g</td>

　　</tr>

　　<tr>

　　d</td>

　　</tr>

　　<tr>

　　e</td>

　　</tr>

　　<tr>

　　f</td>

　　</tr>

　　<tr>

　　g</td>

　　</tr>

　　<tr>

　　d</td>

　　</tr>

　　<tr>

　　e</td>

　　</tr>

　　<tr>

　　f</td>

　　</tr>

　　<tr>

　　g</td>

　　</tr>

　　<tr>

　　d</td>

　　</tr>

　　<tr>

　　e</td>

　　</tr>

　　<tr>

　　f</td>

　　</tr>

　　<tr>

　　g</td>

　　</tr>

　　<tr>

　　d</td>

　　</tr>

　　<tr>

　　e</td>

　　</tr>

　　<tr>

　　f</td>

　　</tr>

　　<tr>

　　g</td>

　　</tr>

　　<tr>

　　d</td>

　　</tr>

　　<tr>

　　e</td>

　　</tr>

　　<tr>

　　f</td>

　　</tr>

　　<tr>

　　g</td>

　　</tr>

　　<tr>

　　d</td>

　　</tr>

　　<tr>

　　e</td>

　　</tr>

　　<tr>

　　f</td>

　　</tr>

　　<tr>

　　g</td>

　　</tr>

　　</table>

　　</BODY>

　　</HTML>

　　C:最简单的方法当然是写2个table，用DIV的overflow-y:auto来实现，兼容性绝对没问题，麻烦之处在于2个table的对齐问题，另外用脚本赋予高度的话，需要加onresize()方法。DOM如下：

复制代码代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>无标题文档</title>

　　<style>

　　*,body,form,ul,li,p,h1,h2,h3,h4,h5,h6 {margin:0px;padding:0px;}

　　body, td, th, input, select,p,span{font-family:"微软雅黑",Arial, Helvetica, sans-serif;}

　　body,td,div{font-size:12px;color:#333; line-height:150%;-webkit-text-size-adjust:none;}

　　select{ font-size:12px;}

　　a {blr:expression(this.onFocus=this.blur()); font-family:"微软雅黑",Arial, Helvetica, sans-serif; font-size:12px; }

　　a:link, a:visited {text-decoration:none;color:#333;}

　　a:hover, a:active {text-decoration:underline;color:#F00;}

　　ul,li,ol{list-style-type:none;}img {border:none;}

　　html{ overflow:hidden;}

　　.header{ width:1000px; margin:auto; height:40px; background:#ccc;}

　　.mainer{ width:1000px; margin:auto; height:auto; overflow-y:scroll;overflow-x:hidden;}

　　</style>

　　function OnResize() {

　　$(".mainer").height($(window).height() - 40);

　　}

　　$(function () {

　　onreszie();

　　});

　　</script>

　　</head>

　　<thead>

　　<tr >

　　</tr>

　　<tr >

　　</tr>

　　</thead>

　　</table>

　　</div>

　　<tbody>

　　<tr>

　　<td >

　　a</td>

　　</tr>

　　<tr>

　　<td >

　　b</td>

　　</tr>

　　<tr>

　　c</td>

　　</tr>

　　<tr>

　　<td >

　　d</td>

　　</tr>

　　<tr>

　　<td >

　　e</td>

　　</tr>

　　<tr>

　　<td >

　　f</td>

　　</tr>

　　<tr>

　　<td >

　　g</td>

　　</tr>

　　<tr>

　　<td >

　　d</td>

　　</tr>

　　<tr>

　　<td >

　　e</td>

　　</tr>

　　<tr>

　　<td >

　　f</td>

　　</tr>

　　<tr>

　　<td >

　　g</td>

　　</tr>

　　<tr>

　　<td >

　　d</td>

　　</tr>

　　<tr>

　　<td >

　　e</td>

　　</tr>

　　<tr>

　　<td >

　　f</td>

　　</tr>

　　<tr>

　　<td >

　　g</td>

　　</tr>

　　<tr>

　　<td >

　　d</td>

　　</tr>

　　<tr>

　　<td >

　　e</td>

　　</tr>

　　<tr>

　　<td >

　　f</td>

　　</tr>

　　<tr>

　　<td >

　　g</td>

　　</tr>

　　<tr>

　　<td >

　　d</td>

　　</tr>

　　<tr>

　　<td >

　　e</td>

　　</tr>

　　<tr>

　　<td >

　　f</td>

　　</tr>

　　<tr>

　　<td >

　　g</td>

　　</tr>

　　<tr>

　　<td >

　　d</td>

　　</tr>

　　<tr>

　　<td >

　　e</td>

　　</tr>

　　<tr>

　　<td >

　　f</td>

　　</tr>

　　<tr>

　　<td >

　　g</td>

　　</tr>

　　<tr>

　　<td >

　　d</td>

　　</tr>

　　<tr>

　　<td >

　　e</td>

　　</tr>

　　<tr>

　　<td >

　　f</td>

　　</tr>

　　<tr>

　　<td >

　　g</td>

　　</tr>

　　<tr>

　　<td >

　　a</td>

　　</tr>

　　<tr>

　　<td >

　　b</td>

　　</tr>

　　<tr>

　　c</td>

　　</tr>

　　<tr>

　　<td >

　　d</td>

　　</tr>

　　<tr>

　　<td >

　　e</td>

　　</tr>

　　<tr>

　　<td >

　　f</td>

　　</tr>

　　<tr>

　　<td >

　　g</td>

　　</tr>

　　<tr>

　　<td >

　　d</td>

　　</tr>

　　<tr>

　　<td >

　　e</td>

　　</tr>

　　<tr>

　　<td >

　　f</td>

　　</tr>

　　<tr>

　　<td >

　　g</td>

　　</tr>

　　<tr>

　　<td >

　　d</td>

　　</tr>

　　<tr>

　　<td >

　　e</td>

　　</tr>

　　<tr>

　　<td >

　　f</td>

　　</tr>

　　<tr>

　　<td >

　　g</td>

　　</tr>

　　<tr>

　　<td >

　　d</td>

　　</tr>

　　<tr>

　　<td >

　　e</td>

　　</tr>

　　<tr>

　　<td >

　　f</td>

　　</tr>

　　<tr>

　　<td >

　　g</td>

　　</tr>

　　<tr>

　　<td >

　　d</td>

　　</tr>

　　<tr>

　　<td >

　　e</td>

　　</tr>

　　<tr>

　　<td >

　　f</td>

　　</tr>

　　<tr>

　　<td >

　　g</td>

　　</tr>

　　<tr>

　　<td >

　　d</td>

　　</tr>

　　<tr>

　　<td >

　　e</td>

　　</tr>

　　<tr>

　　<td >

　　f</td>

　　</tr>

　　<tr>

　　<td >

　　g</td>

　　</tr>

　　<tr>

　　<td >

　　d</td>

　　</tr>

　　<tr>

　　<td >

　　e</td>

　　</tr>

　　<tr>

　　<td >

　　f</td>

　　</tr>

　　<tr>

　　<td >

　　g</td>

　　</tr>

　　</tbody>

　　</table>

　　</div>

　　</body>

　　</html>

　　有时候最笨的方法也可能是最简单最好的方法，这样写的兼容性绝对安全，灵活性也不错。

教程首页更多教程