如何锁定列

.fixedHeaderTr{ 
position:relative; 
<!--top:expression(this.offsetParent.scrollTop); -->
}
.fixedHeaderTd{ 
position:relative; 
left:expression(this.offsetParent.offsetParent.scrollLeft); 
}将fixedHeaderTr样式加到每一行上，将fixedHeaderTd加到你要冻结的每一个TD上就可以了，你要冻结一列那么就在这列的每行的这个TD上加上就可以了，刚研究的，呵呵，测试通过！~
建议lz通过DOM来控制，而不要单纯的使用class=“”

解决方案 »

  1.   

    这是我测试的例子
    <HTML>
        <HEAD>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
            <style>
    .fixedHeaderTr{ 
    position:relative; 
    <!--top:expression(this.offsetParent.scrollTop);-->
    }
    .fixedHeaderTd{ 
    position:relative; 
    left:expression(this.offsetParent.offsetParent.scrollLeft); 
    }
    .mainDiv{ 
    overflow:auto; scrollbar-face-color:9999ff; 
    }
            </style>
        </HEAD>
        <body>
            <br>
            <div class="mainDiv" style="height:150px;width:200px;">
               <table border="1">
    <tr class="fixedHeaderTr">
    <td class="fixedHeaderTd" style="background-color:#CCCCCC;">
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    </tr>
    <tr class="fixedHeaderTr">
    <td class="fixedHeaderTd">
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    </tr>
    <tr>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    </tr>
    <tr>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    </tr>
    <tr>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    </tr>
    <tr>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td> </tr>
    <tr>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    </tr>
    <tr>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    </tr>
    <tr>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    <td>
    aaaaaaaaaa
    </td>
    </tr>
       </table>
            </div>
        </body>
    </HTML>
      

  2.   

    把这行删掉<!--top:expression(this.offsetParent.scrollTop);-->
      

  3.   

    楼上都是 css 实现滴，俺给个 js 版滴，L@_@K!稍后再贴改进版！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title>lock column</title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="[email protected]" />
      <meta name="keywords" content="javascript" />
      <meta name="description" content="for javascript region of csdn" />
      <style type="text/css">
    table {
        border: #a4cdf2 1px solid;
    }
    td {
        border: #a4cdf2 1px solid;
        font-family: "courier new";
        font-size: 11pt;
    }
    td.locked {
        position: relative;
        left: expression(document.getElementById("divTableContainer").scrollLeft);
        background-color: #ffff82;
    }
      </style>
     </head> <body>
      <h3>点击首行锁定列，再次点击解除锁定！</h3>
      <div id="divTableContainer" style="width: 150px; overflow-x: scroll;">
          <table cellpadding="0" cellspacing="0" id="tabTarget">
            <tr>
                <td nowrap>Column A</td>
                <td nowrap>Column B</td>
                <td nowrap>Column C</td>
            </tr>
            <tr>
                <td>R1.1</td>
                <td>R1.2</td>
                <td>R1.3</td>
            </tr>
            <tr>
                <td>R2.1</td>
                <td>R2.2</td>
                <td>R2.3</td>
            </tr>
            <tr>
                <td>R3.1</td>
                <td>R3.2</td>
                <td>R3.3</td>
            </tr>
          </table>
      </div>
     </body>
     <script type="text/javascript">
     <!--
    var oTable = document.getElementById("tabTarget");
    for (var i=0; i<oTable.rows[0].cells.length; i++)
    {
        oTable.rows[0].cells[i].onmouseover = function() {
            this.style.cursor = "hand";
            this.style.backgroundColor = "#BCFEC8";
        }
        oTable.rows[0].cells[i].onmouseout = function() {
            this.style.backgroundColor = "";
        }
        oTable.rows[0].cells[i].onclick = function() {
            var currentCellIndex = this.cellIndex;
            var cellClassName = "";
            if (this.className == "")
            {
                cellClassName = "locked";
            }        for (var i=0; i<oTable.rows.length; i++)
            {
                oTable.rows[i].cells[currentCellIndex].className = cellClassName;
            }
        }
    }
     //-->
     </script>
    </html>
      

  4.   

    改进版热乎出炉喽！IE 7.0 下测试通过！L@_@K<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title>lock column</title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="[email protected]" />
      <meta name="keywords" content="javascript" />
      <meta name="description" content="for javascript region of csdn" />
      <style type="text/css">
    table {
        border: #a4cdf2 1px solid;
    }
    td {
        border: #a4cdf2 1px solid;
        font-family: "courier new";
        font-size: 11pt;
    }
    td.locked {
        position: relative;
        left: expression(document.getElementById("divTableContainer").scrollLeft + "px");
        background-color: #ffff82;
    }
      </style>
     </head> <body>
      <h3>点击首行锁定列，再次点击解除锁定！注：每次只能锁定一列！IE 7.0 下测试通过！</h3>
      <div id="divTableContainer" style="width: 298px; overflow-x: scroll;">
          <table cellpadding="0" cellspacing="0" id="tabTarget">
            <tr>
                <td nowrap>Column A</td>
                <td nowrap>Column B</td>
                <td nowrap>Column C</td>
                <td nowrap>Column D</td>
                <td nowrap>Column E</td>
            </tr>
            <tr>
                <td>R1.1</td>
                <td>R1.2</td>
                <td>R1.3</td>
                <td>R1.4</td>
                <td>R1.5</td>
            </tr>
            <tr>
                <td>R2.1</td>
                <td>R2.2</td>
                <td>R2.3</td>
                <td>R2.4</td>
                <td>R2.5</td>
            </tr>
            <tr>
                <td>R3.1</td>
                <td>R3.2</td>
                <td>R3.3</td>
                <td>R3.4</td>
                <td>R3.5</td>
            </tr>
          </table>
      </div>
     </body>
     <script type="text/javascript">
     <!--
    var oTable = document.getElementById("tabTarget");
    var lockedCellIndex = -1;
    for (var i=0; i<oTable.rows[0].cells.length; i++)
    {
        oTable.rows[0].cells[i].originalCellIndex = oTable.rows[0].cells[i].cellIndex;    oTable.rows[0].cells[i].onmouseover = function() {
            this.style.cursor = "hand";
            this.style.backgroundColor = "#bcfec8";
        }    oTable.rows[0].cells[i].onmouseout = function() {
            this.style.backgroundColor = "";
        }    oTable.rows[0].cells[i].onclick = function() {
            this.style.backgroundColor = "";        var currentCellIndex = this.cellIndex;
            var cellClassName = "locked";
            var curRow;        if (lockedCellIndex != -1)
            {
                for (var i=0; i<oTable.rows.length; i++)
                {
                    curRow = oTable.rows[i];
                    curRow.cells[0].className = "";                // 回到原位。
                    if (lockedCellIndex != 0)
                    {
                        if (lockedCellIndex == (curRow.cells.length-1))
                        {
                            curRow.appendChild(curRow.cells[0]);
                        }
                        else
                        {
                            curRow.insertBefore(curRow.cells[0], curRow.cells[lockedCellIndex+1]);
                        }
                    }
                }            if (lockedCellIndex == this.originalCellIndex)
                {
                    lockedCellIndex = -1;
                    return;
                }
            }        for (var i=0; i<oTable.rows.length; i++)
            {
                curRow = oTable.rows[i];            curRow.cells[this.originalCellIndex].className = cellClassName;            if (this.originalCellIndex != 0)
                {
                    curRow.insertBefore(curRow.cells[this.originalCellIndex], curRow.cells[0]);
                }
            }        lockedCellIndex = this.originalCellIndex;
        }
    }
     //-->
     </script>
    </html>
      

  5.   

    关注 yixianggao 的改进版！
      

  6.   

    补充一点：行数较多时 CPU 占用率会较高，lz 慎用！
      

  7.   

    To uioppp()关注啥，赶紧 SF，哈