$(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 type=”text/javascript” src=”jquery-ui-min.js”></script>
<script>
$(function(){
$(“#yourTableID”).chromatable({
width: “900px”,
height: “400px”,
scrolling: “yes”
});
});
</script>
…
<table id=”yourTableID” width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<thead>
<tr>
<th>Check out this header</th>
<th>Look here’s another one</th>
<th>Wow, look at me!</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>
<style type=”text/css”>
<!–
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>
