固定表最左边的列,固定表的首行:
http://jkisjk.vip.sina.com/code/html/fixHeadTr.htm
把窗口调小一点就可以看到效果。

解决方案 »

  1.   

    <html>
    <head>
    <style>
    tr {background-color:expression((sectionRowIndex%2)?'e0e0e0':'eeeeee')};
    td{font-size:11}
    </style>
    </head><script language=javascript>
    var The10TableWidth=0;//JK
    function  changeColWidth()//JK
    {
    if(document.all("the10Table")==null) return false;
    if(the11Table.rows[0].style.display=="none")return false;
    The10TableWidth=the10Table.offsetWidth;
    var theThe10TableColsNum=the10Table.rows[0].cells.length;
    for(var i=0;i<theThe10TableColsNum-1;i++)
    {
    the10Table.rows[0].cells[i].width =the10Table.rows[0].cells[i].offsetWidth;
    if(the10Table.rows[1]) the10Table.rows[1].cells[i].width =the10Table.rows[0].cells[i].offsetWidth;
    }
    var theThe11TableColsNum=the11Table.rows[0].cells.length;
    for(var i=0;i<theThe11TableColsNum;i++)
    {
    the11Table.rows[0].cells[i].width=the11Table.rows[0].cells[i].offsetWidth;
    if(the11Table.rows[1]) the11Table.rows[1].cells[i].width=the11Table.rows[0].cells[i].offsetWidth;
    }
    the00Div.innerHTML="<table width='100%'  id=the00Table cellspacing='1' border='0' cellpadding='0' class='tdStyleNonEdit'>"
    +the10Table.rows[0].outerHTML+"</table>";
    the01Div.innerHTML="<table width='100%'  id=the01Table cellspacing='1' border='0' cellpadding='0' class='tdStyleNonEdit'>"
    +the11Table.rows[0].outerHTML+"</table>";
    the11Table.style.width=the11Table.offsetWidth;
    the01Div.style.width=the11Div.style.width;
    the10Table.rows[0].style.display="none";
    the11Table.rows[0].style.display="none";

    changeDivHeight();
    document.body.onresize=changeDivHeight;

    }function changeDivHeight()//JK
    {
    if(document.all("the10Table")==null) return false;
    var theTopToBody=the10Div.offsetTop;
    var theOffsetElement=the10Div;
    while(theOffsetElement=theOffsetElement.offsetParent)
    theTopToBody+=theOffsetElement.offsetTop;
    var newHeight=document.body.clientHeight-theTopToBody-30;
    if(the10Table.offsetHeight<newHeight-30){
    the10Div.style.height=null;
    the11Div.style.height=null;
    }
    else if(newHeight>10){
    the10Div.style.height=newHeight;
    the11Div.style.height=newHeight;
    }
    var the11DivWidth=document.body.clientWidth-The10TableWidth-20;
    if(the11DivWidth>30)
    {
    the01Div.style.width=the11DivWidth;
    the11Div.style.width=the11DivWidth;
    }

    }</script><body onresize=changeDivHeight()>
    <br><br>
    <input type=button value="Fix the head tr" onclick="changeColWidth()">
    <table width='100%' border='0'  cellspacing='0' cellpadding='0'>
    <tr>
    <td valign=top width=1%>
    <div style="overflow-x:hidden;overflow-y:hidden;" id=the00Div >
    </div><div id=the10Div style="height:100;overflow-x:hidden;overflow-y:auto;" onscroll= "the11Div.scrollTop=scrollTop ">
    <table id=the10Table width='100%' cellspacing='1' border='0' cellpadding='0' >
    <tr height=22 >
    <td nowrap bgcolor="#66CCFF" >Thank you!</td>
    <td nowrap bgcolor="#66CCFF" >You are welcome!</td>
    </tr> 
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr></table>
    <br>
    </div>
    </td>
    <td valign=top >
    <div id=the01Div style="overFlow-x:hidden;overflow-y:hidden;" onscroll= "the11Div.scrollLeft=scrollLeft ">
    </div><div id=the11Div style="width:450; height:100;overFlow-x:auto;overflow-y:hidden;" onscroll= "the10Div.scrollTop=scrollTop;the01Div.scrollLeft=scrollLeft;">
    <table id=the11Table width='100%' cellspacing='1' border='0' cellpadding='0' >
    <tr height=22>
    <td nowrap bgcolor="#66CCFF" >How are you? How are you?How are you? How are you?How are you? How are you?How are you? How are you? </td>
    <td nowrap bgcolor="#66CCFF" >I am fine! I am fine! I am fine! I am fine! </td>
    </tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr>
    <tr height=22><td>a</td><td>&nbsp;</td></tr></table>
    <br>
    </div>
    </td>
    </tr>
    </table>
    </body>
    </html>
      

  2.   

    谢谢JK_10000(JK1),我就是用这个方法做的,总感觉不太舒服。我本想把左边的固定列做一个浮动层,浮在另两个层上(表头层,表体层),但不能定位这个浮动层的位置。有没有更好的办法。谢谢