<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>table 固定第一行</title>
<script>
Browser = (function(ua){
var b = {
msie: /msie/.test(ua) && !/opera/.test(ua),
opera: /opera/.test(ua),
safari: /webkit/.test(ua) && !/chrome/.test(ua),
firefox: /firefox/.test(ua),
chrome: /chrome/.test(ua)
};
var vMark = "";
for (var i in b) {
if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
}
b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";
b.ie = b.msie;
b.ie6 = b.msie && parseInt(b.version, 10) == 6;
b.ie7 = b.msie && parseInt(b.version, 10) == 7;
b.ie8 = b.msie && parseInt(b.version, 10) == 8;
return b;
})(window.navigator.userAgent.toLowerCase());
var obj = {
change : function(o){
var div = document.getElementById("div1");
var idTr = document.getElementById("idTr");
var pos = getElementPos(div);
var height1 = document.body.clientHeight-pos[1]-20;
var height2 = div.children[0].offsetHeight;
if(height1 > height2){
div.style.height = height2 + 20;
}else{
if(height1 > 300){
div.style.height = height1;
}
else{
div.style.height = 300;
}
}
},
changeStyle:function(){
var idTr = document.getElementById("idTr");
if(Browser.ie6 || Browser.ie7){
idTr.style.position = "relative";
idTr.style.top = idTr.offsetParent.scrollTop;
}else{
idTr.style.position = "fixed";
idTr.style.top = idTr.parentNode.parentNode.parentNode.top;
}
}
}
var EventUtil = new Object;
EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
var oo = function(){
obj.changeStyle();
}
window.onload = function() {
var oDiv = document.getElementById("div1");
EventUtil.addEventHandler(oDiv, "scroll", oo);
}
//得到某一元素的绝对位置,不管该元素嵌套在多复杂的位置里
function getElementPos(obj) {
var left = 0;
var top = 0;
if(obj.x)
{
left= obj.x;
top = obj.y;
}else if(obj.offsetParent)
{
while(obj.offsetParent)
{
left += obj.offsetLeft;
top += obj.offsetTop;
obj = obj.offsetParent;
}
}
return [left,top];//封装在一个数组里
}
</script>
</head>
<body onresize="obj.change()">
<br>
<br><br> <br> <br>
<br> <div style="text-align:center;width:100%;border:1px blue solid;">
<div id="div1" style="margin-right: auto;margin-left: auto;border:1px red solid;height:300;overflow:auto;width:600; scrollbar-face-color:9999ff;">
<table width="800" border=3 cellspacing=0 style="margin-top:-2px;" height=1000>
<TR class="fixedHeaderTr" style="background:navy;color:white;width:800;height:30" id="idTr">
<TD nowrap>Header A</TD>
<TD nowrap>Header B</TD>
<TD nowrap>Header C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD nowrap >
sssss<br>
s</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</table>
</div> </div>
<SCRIPT LANGUAGE="JavaScript">
<!--
obj.change();
//-->
</SCRIPT>
</body>
</html>
| Header A | Header B | Header C |
| A | B |
sssss s |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
| A | B | C |
