表格指定的前几行和列锁定问题

他在 html(css) 区问过这个问题
http://topic.csdn.net/u/20071101/15/7d91d365-c6ca-489e-a65c-ff06a4898ae7.html你这么写同样破坏了大表的完整
初始化数据若固定的前几行列是普通数据还是算法问题
若是普通数据还是完整的初始化大表数据
不管用什么办法取出滚动数据
浮在上面覆盖掉原来大表的位置（也可以对大表再搞一下）
这样两个容器都是完整规范的不需考虑附加别的标签

<html>
<head>
  <title>行列锁定</title>
<style type="text/css">
table {
    border: #a4cdf2 1px solid;
}
th {
    border: #a4cdf2 1px solid;
    font-family: "courier new";
    font-size: 11pt;
    background-color: #ffff82;
    position: relative;
    top: expression(document.getElementById("divTableContainer").scrollTop);
    z-index: 10;
}
th.lock {
    border: #a4cdf2 1px solid;
    font-family: "courier new";
    font-size: 11pt;
    background-color: #ffff82;
    position: relative;
    top: expression(document.getElementById("divTableContainer").scrollTop);
    left: expression(document.getElementById("divTableContainer").scrollLeft);
    z-index: 10;
}
td.locked {
    position: relative;
    left: expression(document.getElementById("divTableContainer").scrollLeft);
    background-color: #ffff82;
}
td {
    border: #a4cdf2 1px solid;
    font-family: "courier new";
    font-size: 11pt;
}  </style>
</head> <body>
  <div id="divTableContainer" style="width: 298px; overflow: auto;">
      <table cellpadding="0" cellspacing="0" id="tabTarget">
        <tr>
            <th nowrap class="lock">Column A</th>
            <th nowrap>Column B</th>
            <th nowrap>Column C</th>
            <th nowrap>Column D</th>
            <th nowrap>Column E</th>
        </tr>
        <tr>
            <td class="locked">R1.1</td>
            <td>R1.2</td>
            <td>R1.3</td>
            <td>R1.4</td>
            <td>R1.5</td>
        </tr>
        <tr>
            <td class="locked">R2.1</td>
            <td>R2.2</td>
            <td>R2.3</td>
            <td>R2.4</td>
            <td>R2.5</td>
        </tr>
        <tr>
            <td class="locked">R3.1</td>
            <td>R3.2</td>
            <td>R3.3</td>
            <td>R3.4</td>
            <td>R3.5</td>
        </tr>
      </table>
  </div>
</body></html>目前的效果是上下滚动正常，左右滚动时Column A单元格被盖掉了，只需解决这个问题即可！请各位帮忙

<th nowrap class="lock"> Column A </th>
        <th nowrap class="lock"> Column B </th>
        <th nowrap class="lock"> Column C </th>
        <th nowrap class="lock"> Column D </th>
        <th nowrap class="lock"> Column E </th>

th.lock {
    border: #a4cdf2 1px solid;
    font-family:  "courier new";
    font-size: 11pt;
    background-color: #ffff82;
    position: relative;
    top: expression(document.getElementById("divTableContainer").scrollTop);
    left: expression(document.getElementById("divTableContainer").scrollLeft);
    z-index: 11;
}

liveforever_1981 谢谢,能简单解释一下这个问题实现的原理吗？

位置计算显然是正确的
你在不明确指定的情况下
表头一行的 th 都是 10
自然后出优先在上面
在明确指定高出一层 11
后面的得乖乖在下面相同 zIndex 后出的如有位置冲突会盖先前的

你不用 IE 自然没效果
expression
可能也有人用 IE 也不支持
乱地很
另：他上代码考过去清清多于字符不然没法用

尝试一下这个控件http://www.sharebank.com.cn/site/soft/soft_view.php?id=21500

<html>
  <head>
    <title> 行列锁定 </title>
<style type="text/css">
table{
  border:#a4cdf2 1px solid;
}
th{
        border:   #a4cdf2   1px   solid;
        font-family:   "courier   new";
        font-size:   11pt;
        background-color:   #ffff82;
        position:   relative;
        top:   expression(document.getElementById("divTableContainer").scrollTop);
        z-index:   10;
}
th.lock{
        border:   #a4cdf2   1px   solid;
        font-family:   "courier   new";
        font-size:   11pt;
        background-color:   #ffff82;
        position:   relative;
        top:   expression(document.getElementById("divTableContainer").scrollTop);
        left:   expression(document.getElementById("divTableContainer").scrollLeft);
        z-index:   10;
}
th.left{
        border:   #a4cdf2   1px   solid;
        font-family:   "courier   new";
        font-size:   11pt;
        background-color:   #ffff82;
        position:   relative;
        top:   expression(document.getElementById("divTableContainer").scrollTop);
        left:   expression(document.getElementById("divTableContainer").scrollLeft);
        z-index:   12;
}
td.locked   {
        position:   relative;
        left:   expression(document.getElementById("divTableContainer").scrollLeft);
        background-color:   #ffff82;
z-index:   11;
}
td   {
        border:   #a4cdf2   1px   solid;
        font-family:   "courier   new";
        font-size:   11pt;
}     </style>
  </head>   <body>
    <div   id="divTableContainer"   style="width:   298px;   overflow:   auto;">
            <table   cellpadding="0"   cellspacing="0"   id="tabTarget">
                <tr>
                        <th   nowrap   class="left"> Column   A </th>
                        <th   nowrap> Column   B </th>
                        <th   nowrap> Column   C </th>
                        <th   nowrap> Column   D </th>
                        <th   nowrap> Column   E </th>                 </tr>
                <tr>
                        <td   class="locked"> R1.1 </td>
                        <td> R1.2 </td>
                        <td> R1.3 </td>
                        <td> R1.4 </td>
                        <td> R1.5 </td>
                </tr>
                <tr>
                        <td   class="locked"> R2.1 </td>
                        <td> R2.2 </td>
                        <td> R2.3 </td>
                        <td> R2.4 </td>
                        <td> R2.5 </td>
                </tr>
                <tr>
                        <td   class="locked"> R3.1 </td>
                        <td> R3.2 </td>
                        <td> R3.3 </td>
                        <td> R3.4 </td>
                        <td> R3.5 </td>
                </tr>
            </table>
    </div>
  </body> </html>

调试易

表格指定的前几行和列锁定问题

解决方案 »