`
guohf
  • 浏览: 406630 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML固定表头Table

阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
</head>
<style>
table{border:1px solid #00ccdf;}
#text{position:fixed;background-color:#00ff00 ;}
*+html #text {background-color:red;position:relative;top:expression(this.offsetParent.scrollTop);}

</style>
<body>
<div style="height: 250px; overflow: auto;padding:-8px;">
<table border=0 cellpadding="0" cellspacing="0">
    <tr id="text">
        <th>
            head        </th>
    </tr>   
<tr><td>dddd</td></tr>
<tr><td>dddd</td></tr>
<tr><td>dddd</td></tr>
<tr><td>dddd</td></tr><tr><td>dddd</td></tr><tr><td>dddd</td></tr><tr><td>dddd</td></tr><tr><td>dddd</td></tr><tr><td>dddd</td></tr><tr><td>dddd</td></tr>
<tr>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>dddd</td>
</tr>
</table>
</div>


</body>

</html>

如果有一些空隙   使用padding 调节。在IE中也可以 top:expression(this.offsetParent.scrollTop-2)这样调节。

 

转,只能IE

<html>
<head><title></title></head>
<style>
.ListTableF {
 border:1px solid #8EC2E6;
 border-collapse:collapse;
 BORDER-BOTTOM: medium none;
     BORDER-LEFT: medium none;
     BORDER-RIGHT: medium none;
     BORDER-TOP: medium none;
     margin-top:-1px;
     margin-left:-1px;
     margin-right:-1px;
}
.fixedDiv{
 overflow:auto;
 height:expression(document.body.clientHeight-240);
 width:expression(800);
 BORDER-BOTTOM: #94B6E6 1pt solid;
    BORDER-LEFT: #94B6E6 1pt solid;
     BORDER-RIGHT: #94B6E6 1pt solid;
     BORDER-TOP: #94B6E6 1pt solid ;
 overflow-x:scroll;
}
.fixedHeaderTr {
 position:relative;
 top:expression(this.offsetParent.scrollTop);
 z-index:20;
}
.fixedHeaderTd {
 position:relative;
 left:expression(this.offsetParent.scrollLeft);
 z-index:10;
}
.TableRow {
 background-repeat:repeat;
 background-position : center left;
 BACKGROUND-COLOR: #AEC2E6;
 font-size: 12px; 
 BORDER-BOTTOM: #94B6E6 1pt solid;
 BORDER-LEFT: #94B6E6 1pt solid;
 BORDER-RIGHT: #94B6E6 1pt solid;
 BORDER-TOP: #94B6E6 1pt solid;
 height:22;
 font-weight: bold; 
 valign:middle;
}
.TableRow1 {
 left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
 position: relative;
 BACKGROUND-COLOR: #AEC2E6;
 font-size: 12px; 
 BORDER-BOTTOM: #94B6E6 1pt solid;
 BORDER-LEFT: #94B6E6 1pt solid;
 BORDER-RIGHT: #94B6E6 1pt solid;
 BORDER-TOP: #94B6E6 1pt solid;
 height:22;
 font-weight: bold; 
 valign:middle;
 z-index:10;
}
.TableRow2 {
 left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
 position: relative;
 background-repeat:repeat;
 background-position : center left;
 BACKGROUND-COLOR: #AEC2E6;
 font-size: 12px; 
 BORDER-BOTTOM: #94B6E6 1pt solid;
 BORDER-LEFT: #94B6E6 1pt solid;
 BORDER-RIGHT: #94B6E6 1pt solid;
 BORDER-TOP: #94B6E6 1pt solid;
 height:22;
 font-weight: bold; 
 valign:middle;
 z-index:30;
}
.RecordRow {
 border: inset 1px #94B6E6;
 BORDER-BOTTOM: #94B6E6 1pt solid;
 BORDER-LEFT: #94B6E6 1pt solid;
 BORDER-RIGHT: #94B6E6 1pt solid;
 BORDER-TOP: #94B6E6 1pt solid;
 font-size: 12px;
 border-collapse:collapse;
 height:22;
}    
</style>
<body>
<div class="fixedDiv">
<table width="1000" border="0" cellspacing="0"  align="center" cellpadding="0"  
class="ListTableF">
 <tr class="fixedHeaderTr">
  <td align="center" width="125" class="TableRow2">第一列</td>
  <td align="center" width="125" class="TableRow">第二列</td>
  <td align="center" width="125" class="TableRow">第三列</td>
  <td align="center" width="125" class="TableRow">第四列</td>
  <td align="center" width="125" class="TableRow">第五列</td>
  <td align="center" width="125" class="TableRow">第六列</td>
  <td align="center" width="125" class="TableRow">第七列</td>
  <td align="center" width="125" class="TableRow">第八列</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第一行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第二行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第三行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第四行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第五行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第六行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第七行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第八行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第九行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十一行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十二行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十三行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十四行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十五行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十六行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十七行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十八行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十九行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第二十行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第二十一行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第二十二行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第二十三行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第二十四行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
</table> 
</body>
</html>
分享到:
评论
1 楼 头子 2013-01-11  
中间那段关于“空隙”的解决方式很赞

相关推荐

Global site tag (gtag.js) - Google Analytics