关于一个表头固定表格的问题

<!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">
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<style type=text/css>
.griddiv{
   overflow-x:hidden;
   border:black 1px solid; 
   BACKGROUND: #F8F9FC;
   margin:auto;
}
.title {
        BORDER-RIGHT: #555 1px solid;
        BORDER-TOP: #fff 1px solid;
        BORDER-BOTTOM: #555 1px solid;
        BORDER-LEFT: #fff 1px solid;
        padding:2 1 2 2;
        BACKGROUND: #ccc;
        CURSOR: hand;
        Font-Size:9pt;
        overflow:hidden;
        WHITE-SPACE: nowrap
}
td{
   WHITE-SPACE: nowrap;
   BORDER-RIGHT: #ddd 1px solid;
   BORDER-TOP: #ddd 1px solid;
}
.cdata {
        padding:1 1 1 2;
        bgColor:expression(this.bgColor=((this.rowIndex)%2==0 )? '#FFFFFF' : '#cccccc');
        Font-Size:9pt;
}</style>
</head><body>
<div class='griddiv' id='griddiv'>
<div id="titlediv" style='position:relative;'></div>
<div id="tablediv" style='overflow-x:scroll;overflow-y:scroll' onscroll='SYNC_Roll(this)'>
  <table id="tb" width='100%' border="0" cellpadding="0" cellspacing="0">
   <tr id="titletr"><td>标题1</td><td>标题2</td><td>标题3</td></tr>
   <tr class='cdata'><td>内容1内容1内容1内容1内容1内容</td><td nowrap>内容2</td><td nowrap>内容3222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
  </table>
</div>
<div>
<script language=javascript>
    function createtitle(tdiv,ttb,ttr){ 
      tdiv.style.width=ttb.clientWidth;
      var newtit="";
      for(i=0;i<titletr.cells.length;i++)
      { 
         ttd=titletr.cells;
         newtit=newtit+"<span class='title' style='width:"+(ttd.clientWidth+1)+"px'>"+ttd.innerText+"</span>"  
      }
      tdiv.innerHTML=newtit;
      titletr.style.visibility = "hidden";  
      if (ttr.rowIndex!=ttb.rows.length-1)
        ttb.moveRow(ttr.rowIndex,ttb.rows.length-1);  
    }
    function SYNC_Roll(obj){
       titlediv.style.posLeft=-obj.scrollLeft;
    }  
    function SetGrid(awidth,aheight){  
       var gdiv=document.getElementById("griddiv");
       titdiv=document.getElementById("titlediv");
       ttbdiv=document.getElementById("tablediv");
       ttb=document.getElementById("tb");
       ttr=document.getElementById("titletr");
       gdiv.style.pixelWidth=awidth;
       tablediv.style.pixelWidth=awidth;
       tablediv.style.pixelHeight=aheight;
       createtitle(titdiv,ttb,ttr); 
    }  
    SetGrid(500,300);
</script>
</body>
</html>

解决方案 »

  1.   

    补充：使用css排版，注意不能省<html><body>等标记
      

  2.   

    大哥 有问题：
    1，ttd=titletr.cells;只能改成ttd=titletr.cells[i];不然固定的表头出错
    2，加了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">能居中，但固定的表头出错；
    不加的话，固定表头不出错，但不居中
      

  3.   

    固定Table首行(20041123)
    http://jkisjk.vip.sina.com/html/fixHeadTr2.htm
    固定Table首行首列(20041123)
    http://jkisjk.vip.sina.com/html/fixHeadTr3.htm注：调整一下窗口大小可以看到相关效果。
      

  4.   

    楼上的程序，我也用过，不过在PHP的时候，如果，行超过20几个，层的显示就不正常。但重置一下窗口或刷新一下，就能恢复正常，我一直找不到原因，所以，想换另外一个。