如何将table的前几行几列锁定,其他部分自由滚动?

原来在 IE 6 下面试验过可以，不过刚才 IE 7 下发现效果不对了，IE 7 越修麻烦越多了！楼主如果用 IE 6 看看效果对不？俺用 IE 7，效果一塌糊涂了，哈<!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;
}
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;
}
td.locked {
    position: relative;
    left: expression(document.getElementById("divTableContainer").scrollLeft + "px");
    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="locked">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>

解决方案 »

  1.   

    IE6下 Column E列错位了,不过差不多
      

  2.   

    IE 6，IE 7 下测试通过！原因出在 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    这句话，改成 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 或不要这句均可！修正后代码如下，L@_@K：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
    <html>
     <head>
      <title>lock column and table header</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">
    #divdatagrid
    {
        overflow: auto;
        scrollbar-base-color: #b0c4de;
        height: 150px;
        width: 200px;
    }
    td {
        border: #a4cdf2 1px solid;
        font-family: "courier new";
        font-size: 11pt;
    }
    th
    {
        font-family: "courier new";
        font-size: 11pt;
        line-height: 1.5em;
        color: #333333;
        background-color: #e3e3e3;
        border: #a4cdf2 1px solid;
        border-top-width: 2px;
        border-bottom-width: 2px;    position: relative;
        top: expression(document.getElementById("divDatagrid").scrollTop);
        z-index: 10;
    }
    td.locked, th.locked {
        font-family: "courier new";
        font-size: 11pt;
        color: #333333;
        background-color: #e3e3e3;
        border: #a4cdf2 1px solid;    position: relative;
        left: expression(document.getElementById("divDatagrid").scrollLeft);
    }
    th.locked {
        z-index: 99;
    }
      </style>
     </head> <body>
        <div id="divDatagrid">
            <table cellspacing="0" rules="all" border="1" id="dgdTest" style="border-collapse:collapse;">
                <tr>
                    <th class="locked">c1</th><th>c0</th><th>c1</th><th>c2</th><th>c3</th><th>c4</th><th>c5</th><th>c6</th><th>c7</th><th>c8</th><th>c9</th><th>c10</th><th>c11</th><th>c12</th><th>c13</th><th>c14</th>
                </tr><tr>
                    <td class="locked">0-1</td><td>0-0</td><td>0-1</td><td>0-2</td><td>0-3</td><td>0-4</td><td>0-5</td><td>0-6</td><td>0-7</td><td>0-8</td><td>0-9</td><td>0-10</td><td>0-11</td><td>0-12</td><td>0-13</td><td>0-14</td>
                </tr><tr>
                    <td class="locked">1-1</td><td>1-0</td><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td><td>1-5</td><td>1-6</td><td>1-7</td><td>1-8</td><td>1-9</td><td>1-10</td><td>1-11</td><td>1-12</td><td>1-13</td><td>1-14</td>
                </tr><tr>
                    <td class="locked">2-1</td><td>2-0</td><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td><td>2-6</td><td>2-7</td><td>2-8</td><td>2-9</td><td>2-10</td><td>2-11</td><td>2-12</td><td>2-13</td><td>2-14</td>
                </tr><tr>
                    <td class="locked">3-1</td><td>3-0</td><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td><td>3-6</td><td>3-7</td><td>3-8</td><td>3-9</td><td>3-10</td><td>3-11</td><td>3-12</td><td>3-13</td><td>3-14</td>
                </tr><tr>
                    <td class="locked">4-1</td><td>4-0</td><td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td><td>4-5</td><td>4-6</td><td>4-7</td><td>4-8</td><td>4-9</td><td>4-10</td><td>4-11</td><td>4-12</td><td>4-13</td><td>4-14</td>
                </tr><tr>
                    <td class="locked">5-1</td><td>5-0</td><td>5-1</td><td>5-2</td><td>5-3</td><td>5-4</td><td>5-5</td><td>5-6</td><td>5-7</td><td>5-8</td><td>5-9</td><td>5-10</td><td>5-11</td><td>5-12</td><td>5-13</td><td>5-14</td>
                </tr><tr>
                    <td class="locked">6-1</td><td>6-0</td><td>6-1</td><td>6-2</td><td>6-3</td><td>6-4</td><td>6-5</td><td>6-6</td><td>6-7</td><td>6-8</td><td>6-9</td><td>6-10</td><td>6-11</td><td>6-12</td><td>6-13</td><td>6-14</td>
                </tr><tr>
                    <td class="locked">7-1</td><td>7-0</td><td>7-1</td><td>7-2</td><td>7-3</td><td>7-4</td><td>7-5</td><td>7-6</td><td>7-7</td><td>7-8</td><td>7-9</td><td>7-10</td><td>7-11</td><td>7-12</td><td>7-13</td><td>7-14</td>
                </tr><tr>
                    <td class="locked">8-1</td><td>8-0</td><td>8-1</td><td>8-2</td><td>8-3</td><td>8-4</td><td>8-5</td><td>8-6</td><td>8-7</td><td>8-8</td><td>8-9</td><td>8-10</td><td>8-11</td><td>8-12</td><td>8-13</td><td>8-14</td>
                </tr><tr>
                    <td class="locked">9-1</td><td>9-0</td><td>9-1</td><td>9-2</td><td>9-3</td><td>9-4</td><td>9-5</td><td>9-6</td><td>9-7</td><td>9-8</td><td>9-9</td><td>9-10</td><td>9-11</td><td>9-12</td><td>9-13</td><td>9-14</td>
                </tr>
            </table>
        </div>
     </body>
    </html>
      

  3.   

    谢谢 可是水平滚动时Column A没有锁定啊,另外表头跨行的话还支持吗?