做了个固定表头的页面，具体是这样做的，在div中包一个table,div的样式设置为overflow:auto;
在table里的第一行设置了position:relative样式，然后在div应用onscroll事件进行控制;
发现滚动效果只能在ie中有效,ff里无效，好像tr的position:relative被略了一样。具体的代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style type="text/css">
#rrr td{ white-space:nowrap}
</style>
<script language="javascript" type="text/javascript">
function $(id)
{
return document.getElementById(id);
}
function pp(div)
{
//alert($("htr").offsetParent.tagName);
$("htr").style.top=parseInt(div.scrollTop)-1;
window.status=div.scrollTop;//$("htr").offsetParent.tagName;//Offset($("rrr")).t+","+$("rrr").offsetTop+","+$("rrr").scrollTop;
$("btn").value=$("htr").style.top;//$("htr").offsetParent.tagName;
}
</script>
</head>
<body style="width:100%;height:100%">
<div style="overflow:auto; width:20%; height:25%" id="ttt" οnscrοll="pp(this)" >
<table cellspacing="0" cellpadding="0" id="rrr" border="1" bordercolor="#0000FF">
<thead>
<tr style=" background:#009900; position:relative;" id="htr">
<td>列一a</td>
<td>列二b</td>
<td>列三c</td>
<td>列四d</td>
<td>列五e</td>
<td>列六f</td>
<td>列七g</td>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>a</td>
</tr>
</tbody>
</table>
</div>
<p><br>
<br>
<input type="button" name="Submit" value="aaa" id="btn"onClick="alert($('rrr').scrollTop)">
</p>
</body>
</html>
请兄弟看下，在firefox没有滚动效果，position:relative似乎对tr没用。
扫一扫
1532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
