滚动条滚动到最后一列，2个层能对齐是关键, 原理：利用动态显示scrollbar 来对齐。
<html>
<head>
<title></title>
<script>
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(){
var div = document.getElementById("divContent");
var left = div.scrollLeft;
var divHeader = document.getElementById("divHeader");
divHeader.scrollLeft = left;
var disWidth = div.children[0].style.width.replace("px","")-div.style.width.replace("px","");
if(div.scrollLeft >= disWidth ){
divHeader.style.overflowY = 'scroll';
}else{
divHeader.style.overflowY = 'hidden';
}
}
window.onload = function() {
var oDiv = document.getElementById("divContent");
EventUtil.addEventHandler(oDiv, "scroll", oo);
}
</script>
</head>
<body >
<br>
<div id="div1All" style="margin-right: auto;margin-left: auto;overflow:auto; ">
<div id="divHeader" style="margin-right: auto;margin-left: auto;overflow-y:hidden;overflow-x:hidden;width:600;">
<table border=1 cellspacing=0 style="margin-top:-2px;width:800">
<TR style="background:navy;color:white;width:800;height:30;" id="idTr">
<TD nowrap width=20%>Header A</TD>
<TD nowrap width=20%>Header B</TD>
<TD nowrap width=20%>Header C</TD>
</TR>
</table>
</div>
<div id="divContent" style="margin-right: auto;margin-left: auto;height:300;overflow:auto;width:600; ">
<table border=1 cellspacing=0 style="margin-top:-2px;width:800;" height=500>
<TR>
<TD width=20%>A</TD>
<TD width=20%>B</TD>
<TD nowrap width=20% >CCC</TD>
</TR>
<TR>
<TD>AAAAAAA</TD>
<TD>BBBBBBB</TD>
<TD>CCCCCCCC</TD>
</TR>
<TR>
<TD>AAAAAAA</TD>
<TD>BBBBBBB</TD>
<TD>CCCCCCCC</TD>
</TR>
<TR>
<TD>AAAAAAA</TD>
<TD>BBBBBBB</TD>
<TD>CCCCCCCC</TD>
</TR>
<TR>
<TD>AAAAAAA</TD>
<TD>BBBBBBB</TD>
<TD>CCCCCCCC</TD>
</TR>
</table>
</div>
</div>
</body>
</html>
1 楼
alexChyi
2010-02-22
bvbvb