html 下拉怎么固定表头,HTML Table 固定表头简单实现

对于静态的表格,固定表头比较简单的实现方法,各浏览器下都可以显示,IE下,表头的栏线不是对得很齐.

浏览器: FireFox 13.1 , Chrome 18.1 , IE6,7,8.

特别注意的是,在IE下,第一行的代码一定要有,要不无法实现.

  html   PUBLIC   “-//W3C//DTD   XHTML   1.0   Strict//EN”   “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

.fixed {

background:   #ccc;

border-collapse:collapse;

border: 1px solid #0066ff;

/*position:absolute;*/

}

.scroll_layer   {

width:   500px;

height: 200px;

overflow:auto;

}

table { width:95%;}

$(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();});

});

header1	header2	header3
body a	body b	body E
body c	body d	body E
body a	body b	body E
body c	body d	body E
body a	body b	body E
body c	body d	body E
body c	body d	body E
body c	body d	body E
body c	body d	body E
body c	body d	body E
body c	body d	body E
body c	body d	body E
body c	body d	body E
body c	body d	body E
body c	body d	body E