原理应该跟这个差不多的:<script language="JavaScript">
function adjust(){
bar.style.top = div1.scrollTop;
}
</script>
<div id=div1 style="background-color:yellow;height:200px;overflow:scroll" onscroll="adjust()">
<div id=bar style="color:red;position:relative;top:0;left:0;width:100%">top bar top bar top bar top bar top bar</div>
<p>p1
<p>p2
<p>p3
<p>p4
<p>p5
<p>p6
<p>p7
<p>p8
<p>p9
<p>p10
<p>p11
<p>p12
<p>p13
<p>p14
<p>p15
<p>p16
<p>p17
</div>
function adjust(){
bar.style.top = div1.scrollTop;
}
</script>
<div id=div1 style="background-color:yellow;height:200px;overflow:scroll" onscroll="adjust()">
<div id=bar style="color:red;position:relative;top:0;left:0;width:100%">top bar top bar top bar top bar top bar</div>
<p>p1
<p>p2
<p>p3
<p>p4
<p>p5
<p>p6
<p>p7
<p>p8
<p>p9
<p>p10
<p>p11
<p>p12
<p>p13
<p>p14
<p>p15
<p>p16
<p>p17
</div>
2.用position:absolute加z-index
<body onscroll=document.recalc(true)>
<div style="left:expression(document.body.scrollLeft);top:expression(document.body.scrollTop);position:absolute">top</div>
<div style=height:1000>
<table width=100%><td width=100>id</td><td>content</td></table>
<div id=div1 style="height:200px;overflow:scroll">
<table width=100%>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
<tr><td width=100>id</td><td>content</td>
</table>
</div>
kwiner(最爱编程) 和flyycyu(fly) 地没有给出具体实现方法,所以不好说,希望能给出代码。
浮动层,我不知道具体指的是什么,希望赐教!
但这并不重要。重要的是我希望能够实现,内容列的宽度能和标题列的宽度保持一致,也就是说,当内容项有数据过长的时候,会自动把表项自动撑大,但这个时候,标题栏还是原来的宽度(因为是两个不相关的表格),这样不就麻烦了嘛。如果能够解决这个问题,这个方法也未尝不是一个好方法。只是并没有解决绝对定为这个问题而已。
如果没有更好的方法的话,我一两天我会给大家分数的,谢谢大家支持,并希望再接再厉!!!
javascript fixed table head
https://lists.latech.edu/pipermail/javascript/2002-February/003005.html
这个网址我打不开。大概是因为教育网的关系。
http://www.xs4all.nl/~ppk/js/fixedhead.html
具体参见贴子:我做的reportview代码放出