HTML Table 固定表头简单实现

对于静态的表格,固定表头比较简单的实现方法,各浏览器下都可以显示,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>

 

此条目发表在Program, 网站分类目录,贴了, , 标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>