表格表头不动tbody区域可用滚动条滚动问题..?

http://qbit.100steps.net/javascript/%B1%ED%B8%F1%B1%ED%CD%B7%B2%BB%B6%AFtbody%C7%F8%D3%F2%BF%C9%D3%C3%B9%F6%B6%AF%CC%F5%B9%F6%B6%AF.htm
上面是原码地址...但是他是写死了的..下面是我的TABLE...各位前辈帮帮忙...谢谢
<TABLE class="listTable">
<TR onclick="ResetTable();"  class="listHeadTr">
<TD class="listTdHeadCenter" width="6%">序号</TD>
<TD class="listTdHeadCenter" width="16%">企业字号</TD>
<TD class="listTdHeadCenter" width="22%">企业名称</TD>
<TD class="listTdHeadCenter" width="19%">注册资本</TD>
<TD class="listTdHeadCenter" width="17%">法定代表人</TD>
<TD class="listTdHeadCenter" width="10%">核准日期</TD>
<TD class="listTdHeadCenter" width="10%">保留期止</TD>
</TR>

<logic:iterate id="ResultSet" property="list[@type='VENTBASIC']">
<TR class="listTr" onclick="changeItem();">
<TD class="listTdCenter">
<%= ++sequenceNumber %>
<html:hidden id="ResultSet" property="VENTBASIC/OPENO"/>
<html:hidden id="ResultSet" property="VENTBASIC/OPENUM"/>
</TD>  
<TD class="listTdCenter"><bean:write id="ResultSet" property="VENTBASIC/TRANAME" /></TD>
<TD class="listTdLeft"><bean:write id="ResultSet" property="VENTBASIC/ENTNAME" /></TD>
<TD class="listTdLeft"><bean:write id="ResultSet" property="VENTBASIC/REGCAP" /></TD>
<TD class="listTdCenter"><bean:write id="ResultSet" property="VENTBASIC/LEREP" /></TD>
<TD class="listTdCenter"><bean:write id="ResultSet" property="VENTBASIC/APPRDATE" formatType="yyyyMMdd" formatClass="com.primeton.eos.webtag.bean.BeanWriteDateFormatImpl" /></TD>
<TD class="listTdCenter"><bean:write id="ResultSet" property="VENTBASIC/SAVEPERTO"  formatType="yyyyMMdd" formatClass="com.primeton.eos.webtag.bean.BeanWriteDateFormatImpl"/></TD>
</TR>
</logic:iterate> </TABLE>

解决方案 »

  1.   

    大梅的代码
    <html><head><title></title></head><body>
    <style>
    div.DataGrid
    {
      overflow: auto;
      height: 160;
      width: 400;
    }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    function fixupFirstRow(tab)
    {
      var div = tab.parentNode;
      if(div.className.toLowerCase() == "datagrid")
      {
        tab.rows[0].style.zIndex = "1";
        tab.rows[0].style.position = "relative";
    /*当有select控件时加下这段代码即可
        var tr = tab.rows[0]; //++
    var ifm=document.createElement("IFRAME") ifm.style.width=tr.offsetWidth
    ifm.style.height=tr.offsetHeight ifm.style.position="absolute"
    ifm.style.left=0
    ifm.style.top=0 ifm.style.filter="alpha(opacity=0)";
    ifm.style.zIndex="99" div.appendChild(ifm)
    */     div.onscroll = function()
        {
          var tr = tab.rows[0];
          tr.style.top = this.scrollTop - (this.scrollTop==0 ? 1 : 2);
          tr.style.left = -1;
        }
      }
    }
    window.onload = function()
    {
      var tab = document.getElementById("content");
      if(tab) fixupFirstRow(tab);
    }
    </SCRIPT><div class=DataGrid>
      <table id=content width=600 border=1 class=table borderColor='#DAEAF5' align=center>
        <tr bgcolor=yellow><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
        <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
      </table>
    </div>
    </body>
    </html>
      

  2.   

    动态创建div覆盖表头，将下列代码保存为htm格式即可运行
    <!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 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></title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    </head>
    <body style="margin:0px;">
    <span id="tt"></span>
     <form name="form1" method="post" action="Default3.aspx" id="form1">
          <div  style="Z-INDEX: 101; LEFT: 0px; POSITION: absolute; TOP: 0px;height:170px;width:700px;overflow-y:scroll">
           <div>
    <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
    <tr>
    <th scope="col">name</th><th scope="col">id</th><th scope="col">xtype</th><th scope="col">typestat</th><th scope="col">xusertype</th><th scope="col">length</th><th scope="col">xprec</th><th scope="col">xscale</th><th scope="col">colid</th><th scope="col">xoffset</th><th scope="col">bitpos</th><th scope="col">reserved</th><th scope="col">colstat</th><th scope="col">cdefault</th><th scope="col">domain</th><th scope="col">number</th><th scope="col">colorder</th><th scope="col">offset</th><th scope="col">collationid</th><th scope="col">language</th><th scope="col">status</th><th scope="col">type</th><th scope="col">usertype</th><th scope="col">printfmt</th><th scope="col">prec</th><th scope="col">scale</th><th scope="col">iscomputed</th><th scope="col">isoutparam</th><th scope="col">isnullable</th><th scope="col">collation</th>
    </tr><tr>
    <td>name</td><td>1</td><td>231</td><td>1</td><td>256</td><td>256</td><td>0</td><td>0</td><td>1</td><td>-1</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>1</td><td>-1</td><td>53284</td><td>2097184</td><td>0</td><td>39</td><td>18</td><td>&nbsp;</td><td>128</td><td>&nbsp;</td><td>0</td><td>0</td><td>0</td><td>Chinese_PRC_CI_AS</td>
    </tr><tr>
    <td>id</td><td>1</td><td>56</td><td>1</td><td>56</td><td>4</td><td>10</td><td>0</td><td>2</td><td>4</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>2</td><td>2</td><td>&nbsp;</td><td>2097184</td><td>0</td><td>56</td><td>7</td><td>&nbsp;</td><td>10</td><td>0</td><td>0</td><td>0</td><td>0</td><td>&nbsp;</td>
    </tr><tr>
    <td>xtype</td><td>1</td><td>175</td><td>1</td><td>175</td><td>2</td><td>0</td><td>0</td><td>3</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>3</td><td>6</td><td>53284</td><td>2097184</td><td>0</td><td>47</td><td>1</td><td>&nbsp;</td><td>2</td><td>&nbsp;</td><td>0</td><td>0</td><td>0</td><td>Chinese_PRC_CI_AS</td>
    </tr><tr>
    <td>uid</td><td>1</td><td>52</td><td>1</td><td>52</td><td>2</td><td>5</td><td>0</td><td>4</td><td>12</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>4</td><td>10</td><td>&nbsp;</td><td>2097184</td><td>0</td><td>52</td><td>6</td><td>&nbsp;</td><td>5</td><td>0</td><td>0</td><td>0</td><td>0</td><td>&nbsp;</td>
    </tr><tr>
    <td>info</td><td>1</td><td>52</td><td>1</td><td>52</td><td>2</td><td>5</td><td>0</td><td>5</td><td>14</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>5</td><td>12</td><td>&nbsp;</td><td>2097184</td><td>0</td><td>52</td><td>6</td><td>&nbsp;</td><td>5</td><td>0</td><td>0</td><td>0</td><td>0</td><td>&nbsp;</td>
    </tr><tr>
    <td>status</td><td>1</td><td>56</td><td>1</td><td>56</td><td>4</td><td>10</td><td>0</td><td>6</td><td>16</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>6</td><td>14</td><td>&nbsp;</td><td>2097184</td><td>0</td><td>56</td><td>7</td><td>&nbsp;</td><td>10</td><td>0</td><td>0</td><td>0</td><td>0</td><td>&nbsp;</td>
    </tr><tr>
    <td>base_schema_ver</td><td>1</td><td>56</td><td>1</td><td>56</td><td>4</td><td>10</td><td>0</td><td>7</td><td>20</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>7</td><td>18</td><td>&nbsp;</td><td>2097184</td><td>0</td><td>56</td><td>7</td><td>&nbsp;</td><td>10</td><td>0</td><td>0</td><td>0</td><td>0</td><td>&nbsp;</td>
    </tr><tr>
    <td>replinfo</td><td>1</td><td>56</td><td>1</td><td>56</td><td>4</td><td>10</td><td>0</td><td>8</td><td>24</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>22</td><td>&nbsp;</td><td>2097184</td><td>0</td><td>56</td><td>7</td><td>&nbsp;</td><td>10</td><td>0</td><td>0</td><td>0</td><td>0</td><td>&nbsp;</td>
    </tr><tr>
    <td>parent_obj</td><td>1</td><td>56</td><td>1</td><td>56</td><td>4</td><td>10</td><td>0</td><td>9</td><td>28</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>9</td><td>26</td><td>&nbsp;</td><td>2097184</td><td>0</td><td>56</td><td>7</td><td>&nbsp;</td><td>10</td><td>0</td><td>0</td><td>0</td><td>0</td><td>&nbsp;</td>
    </tr><tr>
    <td>crdate</td><td>1</td><td>61</td><td>1</td><td>61</td><td>8</td><td>23</td><td>3</td><td>10</td><td>32</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10</td><td>30</td><td>&nbsp;</td><td>2097184</td><td>0</td><td>61</td><td>12</td><td>&nbsp;</td><td>23</td><td>3</td><td>0</td><td>0</td><td>0</td><td>&nbsp;</td>
    </tr><tr>
    <td>ftcatid</td><td>1</td><td>52</td><td>1</td><td>52</td><td>2</td><td>5</td><td>0</td><td>11</td><td>40</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>11</td><td>38</td><td>&nbsp;</td><td>2097184</td><td>0</td><td>52</td><td>6</td><td>&nbsp;</td><td>5</td><td>0</td><td>0</td><td>0</td><td>0</td><td>&nbsp;</td>
    </tr>
    </table>
    </div>
          </div>
      </form>
    <SCRIPT LANGUAGE="JavaScript">
    <!--    function scall(){
            the_table=Main_Tab;
            for(var i=0;i<the_table.rows[0].cells.length;i++)
            {
            document.getElementById("HEAD"+i).style.top = (document.documentElement.scrollTop)+"px";
        }
        }
        
        window.onscroll=scall;
        window.onresize=scall;
        
        var Main_Tab = null;
        var the_cell = null;
        
        function window.onload()
        {
            init();
            scall();  
        }
        
        function init()
        {
            Main_Tab = GridView1;     
            
            the_table=Main_Tab;
            
            
            //window.alert(the_table.rows.length);return;
            for(var i=0;i<the_table.rows[0].cells.length;i++)
            {
                the_cell = the_table.rows[0].cells[i];
                
                var newNode = new Object();
                var newNode = document.createElement("div");
            newNode.setAttribute("id","HEAD"+i);
            document.getElementById("tt").insertAdjacentElement("beforeBegin",newNode);
            
            var ifr = document.getElementById("HEAD"+i);
            ifr.style.position = "absolute";
            ifr.style.left = getLeft(the_cell);
            ifr.style.top = 0;
            ifr.style.width = the_cell.offsetWidth;
            ifr.style.height = the_cell.offsetHeight;
            ifr.style.background = 'gray';
            ifr.style.zIndex = "1001";
            
            ifr.innerHTML = "<TABLE><TR><TD align='center'><STRONG>"+the_cell.innerText+"</STRONG></TD></TR></TABLE>";
                
            } 
        }
        
        function getLeft(obj){
        if(obj.offsetParent){
        return obj.offsetLeft+getLeft(obj.offsetParent);
        }else{
        return obj.offsetLeft;
        }
        }    function getTop(obj){
        if(obj.offsetParent){
        return obj.offsetTop+getTop(obj.offsetParent);
        }else{
        return obj.offsetTop;
        }
        }
    //-->
    </SCRIPT>
    </body>
    </html>
      

  3.   

    好像tbody 中内嵌滚动条，在IE上是不支持的用一些折中的办法....    <table class="basic" 
                style="width:510px; font: small-caps 600 9pts/18pts 楷体_GB2312;
                border-collapse:collapse; position:absolute; display:block; "
            >
                <tr style ="background-color:#d4eaff;"><th colspan = "2" style="height: 21px;width:200px;">
                    文件名
                </th><th style="height: 21px; width: 80px;">
                    状态
                </th><th style="height: 21px; width:60px;">
                    大小
                </th><th style="height: 21px; width:80px;">
                    进度
                </th><th style="height: 21px; width:80px;">
                
                </th></tr>
                <tr><td colspan = "6">
                    <div class="scroll" style="width:520px;">
                        <table id="upload" style="width:500px;"
                        >
                        
                        </table>
                    </div>
                </td></tr>
                <tr style ="background-color:#d4eaff;">
                <td style ="width:200px"  colspan="2"></td>
                <td style ="width:300px;" colspan="4" align="right"><input id="File1" type="file" style="width: 70px;"/></td>
                </tr>
        </table>
    [code=CSS]
            .basic td {
            border-right: #99ccFF 1px solid; 
            border-top: #99ccFF 1px solid; 
            border-left: #99ccFF 1px solid; 
            border-bottom: #99ccFF 1px solid;
            height:21px;
            /*width:100px;*/
            } 
            
            .scroll {   
            width: 50%;                                      /*宽度*/   
            height: 150px;                                   /*高度*/   
            color: Black ;                                   /*颜色*/   
            font-family:  @楷体_GB2312;                   /*字体*/
            padding-top: 10px;                           /*层内上边距*/
            padding-left: 10px;                              /*层内左边距*/   
            /*padding-right: 10px;                             层内右边距*/   
                                             
            /*padding-bottom: 10px;                          /*层内下边距*/   
            /*overflow-x: scroll;                            横向滚动条(scroll:始终出现;auto:必要时出现;具体参考CSS文档)*/   
            overflow-y: scroll;                              /*竖向滚动条*/   
               
            scrollbar-face-color: #D4D4D4;                   /*滚动条滑块颜色*/   
            scrollbar-hightlight-color: #ffffff;             /*滚动条3D界面的亮边颜色*/   
            scrollbar-shadow-color: #919192;                 /*滚动条3D界面的暗边颜色*/   
            scrollbar-3dlight-color: #ffffff;                /*滚动条亮边框颜色*/   
            scrollbar-arrow-color: #919192;                  /*箭头颜色*/   
            scrollbar-track-color: #ffffff;                  /*滚动条底色*/   
            scrollbar-darkshadow-color: #ffffff;             /*滚动条暗边框颜色*/   
        }    
    [/code]