如何固定表格第1列不动？

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>
.fixedHeaderTr 
{ 
position:relative; 
top:expression(this.offsetParent.scrollTop); 
}; .mainDiv 
{ 
overflow:auto; 
scrollbar-face-color:9999ff;
height:expression((document.body.clientHeight-this.offsetTop-20>this.children[0].offsetHeight)?(this.children[0].offsetHeight+20) : (document.body.clientHeight-this.offsetTop-20)); 
width:expression(document.body.clientWidth-20); 
}
</style>
</head> <body>
部分代码来自：<br/>http://blog.csdn.net/wu_yongcai/archive/2004/11/21/189816.aspx
<br/>
  <div class="mainDiv">
     <table width="100%" border=1 cellspacing=0 style="margin-top:-2px" >
     <TR class="fixedHeaderTr" style="background:navy;color:white;">
     <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 >
       C部分代码来自：<br/>
       http://blog.csdn.net/wu_yongcai/archive/2004/11/21/189816.aspx</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>
     <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>
     <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>
 </body>
</html>

解决方案 »

  1.   

    to wuxinlangman:
    不行啊，我要的是水平滚动的处理，但你给的代码是垂直滚动的处理，水平滚动好像实现不了
      

  2.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>1111</title>
    <style>.relativeTag
    {
    position:relative; 
    };.fixColaaaa 
    { 
    position:relative; 
    left:expression(this.offsetParent.parentElement.scrollLeft); 
    }; .fixCol
    {
    background-color:#cccccc;
    position:relative; 
    left:expression(this.parentElement.offsetParent.scrollLeft); 
    }; .mainDiv 
    { 
    overflow:auto; 
    }
    </style>
    </head> <body>
      <div class="mainDiv" style="width:200px;height:150px;">
         <table  width="100%" border=1 cellspacing=0  >
         <TR class="relativeTag" >
         <TD class="fixCol" width="100" nowrap>Header A</TD>
         <TD width="100" nowrap>Header B</TD>
         <TD width="100" nowrap>Header C</TD>
         </TR>
         <TR class="relativeTag" >
         <TD class="fixCol" >A</TD>
         <TD>B</TD>
         <TD>C</TD>
         </TR>
         </table>
      </div>
     </body>
    </html>