<!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> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </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"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第二行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第三行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第四行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第五行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第六行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第七行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第八行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第九行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十一行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十二行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十三行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十四行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十五行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十六行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十七行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十八行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十九行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第二十行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第二十一行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第二十二行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第二十三行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第二十四行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
</table>
</body>
</html>
