如何实现表格固定表头双向滚动
表格中有大量数据，几十列，至少数千行，所以需要双向滚动。大家有什么好的建议吗？
我现在的做法，抛砖了：
<div> - 外层容器，负责显示滚动条
<div> - 表头容器，负责装表头。使用绝对定位，不显示滚动条。宽度为外层容器的clientWidth,即刚好不遮挡滚动条。
<table>...</table> - 表头。用代码控制总宽度、高度和每个单元格的宽度，使之和数据表格保持一致。
</div>
<table>...</table> - 数据表格，也就是真正要现实的内容。
</div>
处理流程：
1、在加载数据之后，调整表头表格，使之和数据表格的表头外观完全一致。由于表头表格使用绝对定位，会浮动在数据表格上方，完全覆盖住数据表的的表头。
2、当拖拽垂直滚动条时，表头表格不动，产生了垂直方向锁定表头的效果。
3、设置一个定时器，定时检查外层容器的scrollLeft，如果和表头容器的scrollLeft不一致，就把这个值设置给表头容器，使表头表格保持和数据表格同时横向滚动。
这个做法在IE7下是没问题的，但是因为涉及到表头表格的宽度调整、容器绝对定位这些做法，跨浏览器兼容就麻烦了。
请教大家有什么好的建议？有没有例子？
1。为table 的表头所在的tr增加属性：
class="flowtitle"
2。增加样式表(可不添加任何样式):
.flowtitle{}{}
3。添加js脚本：
1//标题栏的自动浮动效果
2var oldTop = 0;
3var trs;
4var arrTrs = new Array();
5function onScroll()
6{
7 if(arrTrs && arrTrs.length > 0)
8 {
9 for(var i = 0; i < arrTrs.length; i++)
10 {
11 var arr = arrTrs[i];
12 var top = (document.documentElement && document.documentElement.scrollTop) ?
13 document.documentElement.scrollTop : document.body.scrollTop;
14 if( (top > arr[0].offsetTop || arr[1] < arr[0].offsetTop) &&
15 top < arr[2])
16 {
17 arr[0].style.top = top;
18 }
19 }
20 }
21}
22function load ()
23{
24 //获取可浮动表头列表
25 var trs = document.getElementsByClassName("flowtitle");