对于静态的表格,固定表头比较简单的实现方法,各浏览器下都可以显示,IE下,表头的栏线不是对得很齐.
浏览器: FireFox 13.1 , Chrome 18.1 , IE6,7,8.
特别注意的是,在IE下,第一行的代码一定要有,要不无法实现.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title>
<style type=”text/css”>
.fixed {
background: #ccc;
border-collapse:collapse;
border: 1px solid #0066ff;
/*position:absolute;*/
}
.scroll_layer {
width: 500px;
height: 200px;
overflow:auto;
}
table { width:95%;}
</style>
</head>
<body>
<script type=”text/javascript” src=”jquery.js”>
</script><script type=”text/javascript”>
$(document).ready(function(){
function set_fixed_head(n)
{
$(“.fixed”).css(“position”,”static”);
var id = “#a” + n.toString();
var id_pre = “”;
var p ;
var s ;
if (n == 0)
{
p = $(id);
s = p.position();
$(id).css(“left”,s.left);
$(id).css(“width”,p.width() );
if ($.browser.msie)
{
$(id).css(“_width”,p.width() -0); // for ie6
$(id).css(“*width”,p.width() -0); // for ie7
var w8 = p.width() -3;
var v8 = w8.toString() + “px”; // for ie8
$(id).attr(“style”,”width:” + v8 );
//alert( parseInt($.browser.version, 10) );
}
}
else
{
id_pre = “#a” + (n-1).toString();
p = $(id_pre);
s = p.position();
//$(id).css(“left”,s.left + $(id).width() );
$(id).css(“left”,$(id).position().left );
$(id).css(“width”, $(id).width() );
if ($.browser.msie)
{
//$(id).css(“left”,s.left + $(id).width() );
$(id).css(“_width”,$(id).width() -0); // for ie6
$(id).css(“*width”,$(id).width() -0); // for ie7
var w8 = $(id).width() -0;
var v8 = w8.toString() + “px”; // for ie8 px\9 的ie hacker 无法运行,jquery.
$(id).css(“width”, $(id).width() );
}
}
}
set_head();
function set_head()
{
for (n = 0; n < 3; n++)
{
set_fixed_head(n);
}
$(“.fixed”).css(“position”,”absolute”);
//$(“.fixed”).css(“position”,”fixed”);
}
//$(window).resize( function() { set_head(); location.reload();});
});
</script>
<div>
<table border=”1″ bordercolor=”#0066FF” cellspacing=”0″ id=”table2″ >
<tr>
<td id=”a0″>
header1
</td>
<td id=”a1″>
header2
</td>
<td id=”a2″>
header3
</td>
</tr>
<tr>
<td>
body a
</td>
<td>
body b
</td>
<td>
body E
</td>
</tr>
<tr>
<td>
body c
</td>
<td>
body d
</td>
<td>
body E
</td>
</tr>
<tr>
<td>
body a
</td>
<td>
body b
</td>
<td>
body E
</td>
</tr>
<tr>
<td>
body c
</td>
<td>
body d
</td>
<td>
body E
</td>
</tr>
<tr>
<td>
body a
</td>
<td>
body b
</td>
<td>
body E
</td>
</tr>
<tr>
<td>
body c
</td>
<td>
body d
</td>
<td>
body E
</td>
</tr>
<tr>
<td>
body c
</td>
<td>
body d
</td>
<td>
body E
</td>
</tr>
<tr>
<td>
body c
</td>
<td>
body d
</td>
<td>
body E
</td>
</tr>
<tr>
<td>
body c
</td>
<td>
body d
</td>
<td>
body E
</td>
</tr>
<tr>
<td>
body c
</td>
<td>
body d
</td>
<td>
body E
</td>
</tr>
<tr>
<td>
body c
</td>
<td>
body d
</td>
<td>
body E
</td>
</tr>
<tr>
<td>
body c
</td>
<td>
body d
</td>
<td>
body E
</td>
</tr>
<tr>
<td>
body c
</td>
<td>
body d
</td>
<td>
body E
</td>
</tr>
<tr>
<td>
body c
</td>
<td>
body d
</td>
<td>
body E
</td>
</tr>
<tr>
<td>
body c
</td>
<td>
body d
</td>
<td>
body E
</td>
</tr>
</table>
</div>
</body>
</html>