大家一起讨论一下能动态定义表格的开头某几列或者某几行可以不随表格滚动的方法？

看看这个：
http://expert.csdn.net/Expert/topic/2848/2848255.xml?temp=.8958704

解决方案 »

  1.   

    http://www.51windows.net/hw/asp/jsview.asp?id=314
      

  2.   

    建议在IE6下浏览。
    拖动标题上的白色分隔边框可以实现调整列宽。<HTML>
    <head>
    <title>自定义表格</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta content=0 http-equiv=Expires>
    <style>
    <!--
    body{
        font-size: 12px;
        margin-top: 0pt;
        margin-left: 10pt;
        margin-right: 10pt;
        color: #000000;
        font-family: arial, 'trebuchet ms', helvetica;
    background-color: #D4D0C8;
    }
    nobr{
        font-size: 12px;
    }
    table.list{
    border : 0px;
    background-color: #808080;
    }
    tr.listTitle{
        font-size: 12px;
    background-color: #D4D0C8;
    }
    tr.listContent{
        font-size: 12px;
    background-color: #ffffff;
    }
    span{
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    }
    -->
    </style></head>
    <body onresize="setScroll()" onload="setBorder(0)" onmouseup="release()" style="overflow :hidden;">
    <div onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#ffffff'" onmousedown="init()" index="0" id="theBorder" name="theBorder" style="width:1px;position:absolute;cursor:e-resize;background-color:#ffffff;"></div>
    <div onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#ffffff'" onmousedown="init()" index="1" id="theBorder" name="theBorder" style="width:1px;position:absolute;cursor:e-resize;background-color:#ffffff;"></div>
    <div onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#ffffff'" onmousedown="init()" index="2" id="theBorder" name="theBorder" style="width:1px;position:absolute;cursor:e-resize;background-color:#ffffff;"></div>
    <div onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#ffffff'" onmousedown="init()" index="3" id="theBorder" name="theBorder" style="width:1px;position:absolute;cursor:e-resize;background-color:#ffffff;"></div>
    <div onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#ffffff'" onmousedown="init()" index="4" id="theBorder" name="theBorder" style="width:1px;position:absolute;cursor:e-resize;background-color:#ffffff;"></div>
    <div onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#ffffff'" onmousedown="init()" index="5" id="theBorder" name="theBorder" style="width:1px;position:absolute;cursor:e-resize;background-color:#ffffff;"></div>
    <div onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#ffffff'" onmousedown="init()" index="6" id="theBorder" name="theBorder" style="width:1px;position:absolute;cursor:e-resize;background-color:#ffffff;"></div>
    <div onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#ffffff'" onmousedown="init()" index="7" id="theBorder" name="theBorder" style="width:1px;position:absolute;cursor:e-resize;background-color:#ffffff;"></div>
    <table id="mainTable" class="list" height="100%" width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr class="listTitle" height="20">
    <td>
    <span id="theScroll" name="theScroll" style="height:100%;width:100%;overflow:hidden;">
    <table class="list" style="height:100%;width:100%;border-collapse : collapse;table-layout: fixed;" cellspacing="1" cellpadding="0" border="0">
    <tr class="listTitle">
    <td width="80"><span><nobr>ID号</nobr></span></td>
    <td width="80"><span><nobr>ID号ID号ID号ID号ID号ID号</nobr></span></td>
    <td width="80"><span><nobr>编号</nobr></span></td>
    <td width="80"><span><nobr>姓名</nobr></span></td>
    <td width="80"><span><nobr>别名</nobr></span></td>
    <td width="80"><span><nobr>代号</nobr></span></td>
    <td width="80"><span><nobr>绰号</nobr></span></td>
    <td width="80"><span><nobr>性别</nobr></span></td>
    <td></td>
    </tr>
    </table>
    </span>
    </td>
    <td width="16">&nbsp;</td>
    </tr>
    <tr class="listTitle">
    <td colspan="2">
    <span id="theScroll" name="theScroll" style="height:100%;width:100%;overflow-x:auto;overflow-y:scroll;" onscroll="setScroll()">
    <table class="list" style="height:100%;width:100%;border-collapse : collapse;table-layout: fixed;" cellspacing="1" cellpadding="0" border="0">
    <script>
    <!--
    for (var i=0;i<30;i++){
    document.write("<tr class=\"listContent\">");
    document.write("<td width=\"80\"><span><nobr><a href=\"#\">02000000000001</a></nobr></span></td>");
    document.write("<td width=\"80\"><span><nobr>02000000000001</nobr></span></td>");
    document.write("<td width=\"80\"><span><nobr>"+i+"</nobr></span></td>");
    document.write("<td width=\"80\"><span><nobr>姓名</nobr></span></td>");
    document.write("<td width=\"80\"><span><nobr>姓\r\n名</nobr></span></td>");
    document.write("<td width=\"80\"><span><nobr>按时大苏打按时大苏打</nobr></span></td>");
    document.write("<td width=\"80\"><span><nobr>234565477234565477</nobr></span></td>");
    document.write("<td width=\"80\"><span><nobr>$^$%&^&*$^$%&^&*</nobr></span></td>");
    document.write("<td></td>");
    document.write("</tr>");
    }
    -->
    </script> </table>
    </span>
    </td>
    </tr>
    <tr class="listTitle" height="20">
    <td>
    <span id="theScroll" name="theScroll" style="height:100%;width:100%;overflow :hidden;">
    <table class="list" style="height:100%;width:100%;border-collapse : collapse;table-layout: fixed;" cellspacing="1" cellpadding="0" border="0">
    <tr class="listTitle">
    <td width="80"><span><nobr>ID号</nobr></span></td>
    <td width="80"><span><nobr>ID号ID号ID号ID号ID号ID号</nobr></span></td>
    <td width="80"><span><nobr>编号</nobr></span></td>
    <td width="80"><span><nobr>姓名</nobr></span></td>
    <td width="80"><span><nobr>别名</nobr></span></td>
    <td width="80"><span><nobr>代号</nobr></span></td>
    <td width="80"><span><nobr>绰号</nobr></span></td>
    <td width="80"><span><nobr>性别</nobr></span></td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </span>
    </td>
    <td width="16">&nbsp;</td>
    </tr>
    </table></body>
    </html>
      

  3.   

    <script>
    <!--var tmpPosition = null;
    var border = null;function setBorder(leftMove){
    for (var i=0;i<mainTable.cells(0).children(0).children(0).rows(0).cells.length-1;i++){
    theBorders = document.getElementsByName("theBorder");
    theBorders[i].style.top = getIEPos(mainTable.cells(0).children(0).children(0).rows(0),"Top");
    theBorders[i].style.height = mainTable.cells(0).children(0).children(0).rows(0).offsetHeight;
    theBorders[i].style.left = getIEPos(mainTable.cells(0).children(0).children(0).rows(0).cells(i+1),"Left")-1-leftMove;
    }
    }function init(){
    if (event.srcElement.tagName!="DIV"){
    return false;
    }
    tmpPosition = event.clientX;
    border = event.srcElement;
    event.srcElement.attachEvent("onmousemove",move);
    event.srcElement.setCapture();
    }function release(){
    if (border!=null){
    border.detachEvent("onmousemove",move);
    border.releaseCapture();
    border.style.backgroundColor="#ffffff";
    }
    }function move(){
    var wid = parseInt(mainTable.rows(0).cells(0).children(0).children(0).rows(0).cells(parseInt(border.index)).width)+(event.clientX-tmpPosition);
    if (wid < 1){
    wid = 1;
    }
    mainTable.rows(0).cells(0).children(0).children(0).rows(0).cells(parseInt(border.index)).width = wid;
    for (var j=0;j<mainTable.rows(1).cells(0).children(0).children(0).rows.length;j++){
    mainTable.rows(1).cells(0).children(0).children(0).rows(j).cells(parseInt(border.index)).width = wid;//parseInt(mainTable.rows(1).cells(0).children(0).children(0).rows(j).cells(parseInt(border.index)).width)+(event.clientX-tmpPosition);
    }
    mainTable.rows(2).cells(0).children(0).children(0).rows(0).cells(parseInt(border.index)).width = wid;//parseInt(mainTable.rows(2).cells(0).children(0).children(0).rows(0).cells(parseInt(border.index)).width)+(event.clientX-tmpPosition);
    setBorder(0);
    tmpPosition = event.clientX;
    }function setScroll(){
    theScrolls = document.getElementsByName("theScroll");
    theScrolls[0].scrollLeft = theScrolls[1].scrollLeft;
    theScrolls[2].scrollLeft = theScrolls[1].scrollLeft;
    setBorder(theScrolls[1].scrollLeft);
    }function getIEPos(elt,which) {
    //get the absolute position of the object
    var iPos = 0;
    while (elt!=null) {
    iPos += elt["offset" + which];
    elt = elt.offsetParent;
    }
    return iPos;
    }-->
    </script>