table固定显示第一行数据,支持ie/firefox .

滚动条滚动到最后一列,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> 

你可能感兴趣的:(C++,c,IE,OO,firefox)