怎样固定表格的第一行？让标题不随滚动条滚动。表格的第一行是标题，这些标题是从数据库中取出来的，标题的个数是不确定的

<html>
<head>
<title>我的表格</title>
<style>
.table0 {
height:90%;
}.table0 caption{
width:100%;
height:26px;
line-height:26px;
font-size:20px;
font-color:black;
font-weight:900;
letter-spacing:5px;
}.table0 thead td {
text-align:center;
vertical-align:middle;
height:20px;
line-height:18px;
font-size:14px;
font-color:black;
font-weight:bold;
padding-top:2px;
padding-bottom:2px;
border:#555 1px solid;
margin:0px;
}.table0 tfoot td{
text-align:left;
vertical-align:middle;
height:20px;
line-height:18px;
font-size:12px;
font-color:black;
font-weight:bold;
padding-top:2px;
padding-bottom:2px;
padding-left:12px;
padding-right:12px;
border:#555 1px solid;
}.table0 tbody td {
width:100%;
height:auto;
border:#555 1px solid;
padding:0px;
margin:0px;
}.table1 tbody td {
text-align:left;
vertical-align:middle;
height:20px;
line-height:18px;
font-size:14px;
font-color:#444;
font-weight:normal;
padding-top:2px;
padding-bottom:2px;
padding-left:12px;
padding-right:12px;
border-right:#555 1px solid;
border-bottom:#555 1px solid;
overflow:hidden;
text-overflow:ellipsis;
word-break:keep-all;
word-wrap:normal;
}</style>
<script>function init(){
theT=createTable("我的收藏夹",["Group:150","Name:300","URL:200","Visited:100","Modify:100","Delete:100"]);
//参数说明:createTable(strCaption,colHeads)
//strCaption 标题
//colHeads 是一个array,每个item的格式是 名称:宽度 的字符串
for(var i=0;i<40;i++){
theR=theT.insertRow();
for(var j=0;j<7;j++){
theC=theR.insertCell();
theC.innerText=j;
}
}
}
function createTable(strCaption,colHeads){
//参数说明:colHeads 是一个array,每个item的格式是 名称:宽度 的字符串
//生成表格
oTable=document.createElement("table");
document.body.insertBefore(oTable);
//设置class
oTable.className="table0";

with(oTable.style){
tableLayout="fixed";
borderCollapse="collapse"
borderSpacing="0px";
}
//设置变量
oTCaption=oTable.createCaption();
oTHead=oTable.createTHead();
oTFoot=oTable.createTFoot();

//生成标题
oTCaption.innerText=strCaption;

//设置列宽
oTHead.insertRow();
for(var i=0;i<colHeads.length;i++){
tHeadName=colHeads[i].split(":")[0];
tHeadWidth=isNaN(parseInt(colHeads[i].split(":")[1]))?"auto":parseInt(colHeads[i].split(":")[1]);
theCell=oTHead.rows[0].insertCell();
theCell.style.width=tHeadWidth;
}
theCell=oTHead.rows[0].insertCell();
theCell.width=20;
oTHead.rows[0].style.display="none";

//生成表头
oTHead.insertRow();
for(var i=0;i<colHeads.length;i++){
tHeadName=colHeads[i].split(":")[0];
tHeadWidth=isNaN(parseInt(colHeads[i].split(":")[1]))?"auto":parseInt(colHeads[i].split(":")[1]);
theCell=oTHead.rows[1].insertCell();
theCell.innerText=tHeadName;
theCell.style.width=tHeadWidth;
}
theCell=oTHead.rows[1].insertCell();
theCell.width=24;

//生成表脚
oTFoot.insertRow();
theCell=oTFoot.rows[0].insertCell();
theCell.innerHTML="<marquee scrollDelay=50 scrollAmount=2>Copy rights 2005. Hutia presents.</marquee>";
theCell=oTFoot.rows[0].insertCell();
theCell.colSpan=colHeads.length-1;
theCell=oTFoot.rows[0].insertCell();
theCell.width=20;

//生成主体
oTable.all.tags("Tbody")[0].insertRow();
theCell=oTable.all.tags("Tbody")[0].rows[0].insertCell();
theCell.colSpan=colHeads.length+1;
oMain=document.createElement("DIV");
theCell.insertBefore(oMain);
with(oMain.style){
width="100%";
height="100%";
overflowY="auto";
overflowX="hidden";
margin="0px";
marginLeft="-1px";
}

oTBody=document.createElement("table");
oMain.insertBefore(oTBody);
oTable.oTBody=oTBody;
//禁止选择
oTCaption.onselectstart=oTHead.onselectstart=oTFoot.onselectstart=function(){return(false);}

//设置class
oTBody.className="table1";
with(oTBody.style){
width=oTable.offsetWidth-15;
tableLayout="fixed";
borderCollapse="collapse"
borderSpacing="0px";
padding="0px";
margin="0px";
}

//初始化列宽
oTBody.insertRow();
for(var i=0;i<colHeads.length;i++){
tHeadWidth=isNaN(parseInt(colHeads[i].split(":")[1]))?"auto":parseInt(colHeads[i].split(":")[1]);
theCell=oTBody.rows[0].insertCell();
theCell.style.width=tHeadWidth;
}
oTBody.rows[0].style.display="none";

return(oTBody);
}function insertRow(){
var intL=oTBody.rows.length;
theRow=oTBody.insertRow();
theRow.index=intL;
theRow.onmouseover=rowOnMouseOver;
theRow.onmouseout=rowOnMouseOut;
theRow.onclick=rowOnClick;
for(var i=0;i<colHeads.length;i++){
theCell=theRow.insertCell();
theCell.tabIndex=0;
theCell.hideFocus=true;
theCell.colIndex=i;
theCell.onmouseover=function(){this.focus();};
theCell.onmouseout=cellOnBlur;
theCell.onfocus=cellOnFocus;
theCell.onblur=cellOnBlur;
}
theRow.cells[0].innerText=strGroup?strGroup:"ROOT";
theRow.cells[1].innerText=strName?strName:"Untitled Document.";
theRow.cells[2].innerText=strURL?strURL:"Unspecified URL";
theRow.cells[3].innerHTML=strVisited?"Yes".fontcolor("red"):"Unknow";
theRow.cells[4].innerHTML=strModify?"Yes".fontcolor("red"):"No".fontcolor("Green");
theRow.cells[5].innerHTML="Delete".fontcolor("red");
}</script>
</head>
<body onload="init();"></body>
</html>

解决方案 »

  1.   

    本来有一个demo的。。不过今天服务器坏了
    临时放在这： http://www.xiaobin.cn/temp/cs2bs.html代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>B/S模拟C/S架构时常用的数据显示页</title>
    <style type="text/css">
    <!--
    body, table {font-size:12px; font-family:Arial, "宋体"}
    //-->
    </style>
    </head><body>
    <table width="400" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #BBBBBB; border-top-width:3px;">
        <tr>
            <td valign="top">
                <div style="overflow:hidden; width:400px;" id="headerDiv">
                    <table width="520" border="0" cellpadding="0" cellspacing="1" bgcolor="#E0E0E0">
                        <tr style="text-align:left; ">
                            <th width="20" height="20">#</th>
                            <th width="350">网址</th>
                            <th width="130">描述</th>
                            <th width="20"></th>
                        </tr>
                        <tr bgcolor="#BBBBBB" height="1">
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div style="overflow:auto; width:400px; height:100px;" onscroll="document.getElementById('headerDiv').scrollLeft = scrollLeft">
                <table width="500" border="0" cellpadding="0" cellspacing="1" bgcolor="#F9F9F9">
                <tr>
                    <td width="20" height="20">1</td>
                    <td width="350">http://www.xiaobin.net</td>
                    <td width="130">个人网站</td>
                    </tr>
                <tr bgcolor="#FFFFFF">
                    <td height="20">2</td>
                    <td>http://www.xiaobin.cn</td>
                    <td>个人网站</td>
                    </tr>
                <tr>
                    <td height="20">3</td>
                    <td>http://blog.xiaobin.net</td>
                    <td>网络日志</td>
                    </tr>
                <tr bgcolor="#FFFFFF">
                    <td height="20">4</td>
                    <td>http://resume.xiaobin.net</td>
                    <td>个人简历</td>
                    </tr>
                <tr>
                    <td height="20">5</td>
                    <td>http://www.xiaobin.cn</td>
                    <td>个人网站</td>
                    </tr>
                <tr bgcolor="#FFFFFF">
                    <td height="20">6</td>
                    <td>http://resume.xiaobin.net</td>
                    <td>个人简历</td>
                    </tr>
                <tr>
                    <td height="20">7</td>
                    <td>http://blog.xiaobin.net</td>
                    <td>网络日志</td>
                    </tr>
                <tr bgcolor="#FFFFFF">
                    <td height="20">8</td>
                    <td>http://www.xiaobin.cn</td>
                    <td>个人网站</td>
                    </tr>
                <tr>
                    <td height="20">9</td>
                    <td>http://www.xiaobin.net</td>
                    <td>个人网站</td>
                    </tr>
                <tr bgcolor="#FFFFFF">
                    <td height="20">10</td>
                    <td>http://resume.xiaobin.net</td>
                    <td>个人简历</td>
                    </tr>
                <tr>
                    <td height="20">11</td>
                    <td>http://blog.xiaobin.net</td>
                    <td>网络日志</td>
                    </tr>
                <tr bgcolor="#FFFFFF">
                    <td height="20">12</td>
                    <td>http://resume.xiaobin.net</td>
                    <td>个人简历</td>
                    </tr>
                <tr>
                    <td height="20">13</td>
                    <td>http://www.xiaobin.net</td>
                    <td>个人网站</td>
                    </tr>
                <tr bgcolor="#FFFFFF">
                    <td height="20">14</td>
                    <td>http://blog.xiaobin.net</td>
                    <td>网络日志</td>
                    </tr>
            </table>
            </div>
            </td>
        </tr>
    </table>
    </body>
    </html>
      

  2.   

    <table> //标题
        <tr>
          <% if name is not null {%>
          <td>
             name
          </td>
          <% } %>
          <% if No is not null {%>
          <td>
             No
          </td>
          <% } %>
         ...
        </tr>
    </table>
    <table> //内容
        <tr>
          <td>
          </td>
        </tr>
        <tr>
          <td>
          </td>
        </tr></table>主要意思就是标题，内容2个table，内容table里加滚动条
      

  3.   

    调整一下窗口大小，
    可以看到相关效果:<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</title>
    <style>
    .fixedHeaderTr 
    { 
    position:relative; 
    top:expression(this.offsetParent.scrollTop); 
    }; .mainDiv 
    { 
    overflow:auto; 
    scrollbar-face-color:9999ff;
    height:expression((document.body.clientHeight-this.offsetTop-20>this.children[0].offsetHeight)?(this.children[0].offsetHeight+20) : (document.body.clientHeight-this.offsetTop-20)); 
    width:expression(document.body.clientWidth-20); 
    }
    </style>
    </head> <body>
    部分代码来自：<br>http://blog.csdn.net/wu_yongcai/archive/2004/11/21/189816.aspx
    <br>
      <div class="mainDiv">
         <table width="100%" border=1 cellspacing=0 style="margin-top:-2px" >
         <TR class="fixedHeaderTr" style="background:navy;color:white;">
         <TD nowrap>Header A</TD>
         <TD nowrap>Header B</TD>
         <TD nowrap>Header C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>B</TD>
         <TD nowrap >
           C部分代码来自：<br>
           http://blog.csdn.net/wu_yongcai/archive/2004/11/21/189816.aspx</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>B</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>B</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>B</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>B</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>B</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>B</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>B</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>B</TD>
         <TD>C</TD>
         </TR>
         </table>
      </div>
     </body>
    </html>
      

  4.   


    回楼上"如何同时固定左方第一列呢"：
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</title>
    <style>.fixedHeaderTr 
    {
    z-index:10;
    position:relative; 
    top:expression(this.offsetParent.scrollTop); 
    }; .relativeTag
    {
    position:relative; 
    };.fixedHeaderCol 
    {
    background-color:#cccccc;
    position:relative; 
    left:expression(this.parentElement.offsetParent.scrollLeft); 
    }; .mainDiv 
    { 
    overflow:auto; 
    scrollbar-face-color:9999ff;
    height:expression((document.body.clientHeight-this.offsetTop-20>this.children[0].offsetHeight)?(this.children[0].offsetHeight+20) : (document.body.clientHeight-this.offsetTop-20)); 
    width:expression(document.body.clientWidth-20); 
    }
    </style>
    </head> <body>
    部分代码来自：<br>http://blog.csdn.net/wu_yongcai/archive/2004/11/21/189816.aspx
    <br>
      <div class="mainDiv" id=mailContainerDiv>
         <table width="100%" cellspacing=0 border=1 style="margin-top:-2;margin-left:-1">
         <TR class="fixedHeaderTr" style="background:navy;color:white;">
         <TD nowrap class="fixedHeaderCol" style="background:navy;color:white;">Header A</TD>
         <TD nowrap class="fixedHeaderCol" style="background:navy;color:white;">Header B</TD>
         <TD nowrap>Header C</TD>
         </TR>
         <TR class="relativeTag" >
         <TD class="fixedHeaderCol" >A</TD>
         <TD class="fixedHeaderCol" >B</TD>
         <TD nowrap >
           部分代码来自：<br>
           http://blog.csdn.net/wu_yongcai/archive/2004/11/21/189816.aspx</TD>
         </TR >
         <TR class="relativeTag" >
         <TD class="fixedHeaderCol" >A</TD>
         <TD class="fixedHeaderCol">B</TD>
         <TD>C</TD>
         </TR>
         <TR class="relativeTag" >
         <TD class="fixedHeaderCol" >A</TD>
         <TD class="fixedHeaderCol">B</TD>
         <TD>C</TD>
         </TR>
         <TR class="relativeTag" >
         <TD class="fixedHeaderCol" >A</TD>
         <TD class="fixedHeaderCol">B</TD>
         <TD>C</TD>
         </TR>
         <TR class="relativeTag" >
         <TD class="fixedHeaderCol" >A</TD>
         <TD class="fixedHeaderCol">B</TD>
         <TD>C</TD>
         </TR>
         <TR class="relativeTag" >
         <TD class="fixedHeaderCol" >A</TD>
         <TD class="fixedHeaderCol">B</TD>
         <TD>C</TD>
         </TR>
         <TR class="relativeTag" >
         <TD class="fixedHeaderCol" >A</TD>
         <TD class="fixedHeaderCol">B</TD>
         <TD>C</TD>
         </TR>
         <TR class="relativeTag" >
         <TD class="fixedHeaderCol" >A</TD>
         <TD class="fixedHeaderCol">B</TD>
         <TD>C</TD>
         </TR>
         <TR class="relativeTag" >
         <TD class="fixedHeaderCol" >A</TD>
         <TD class="fixedHeaderCol">B</TD>
         <TD>C</TD>
         </TR>
         </table>
      </div>
     </body>
    </html>
      

  5.   

    pdw2009(不想做菜鸟)：
    你给的例子还不错，可是标题栏所在行的下边框比较粗，当内容表格的行与标题所在表格的行重叠时就会出现这种情况能否解决？