日期:2014-05-16  浏览次数:20359 次

如何实现表格固定表头双向滚动
表格中有大量数据,几十列,至少数千行,所以需要双向滚动。大家有什么好的建议吗?

我现在的做法,抛砖了:
<div> - 外层容器,负责显示滚动条
  <div> - 表头容器,负责装表头。使用绝对定位,不显示滚动条。宽度为外层容器的clientWidth,即刚好不遮挡滚动条。
  <table>...</table> - 表头。用代码控制总宽度、高度和每个单元格的宽度,使之和数据表格保持一致。
  </div>
  <table>...</table> - 数据表格,也就是真正要现实的内容。
</div>
处理流程:
1、在加载数据之后,调整表头表格,使之和数据表格的表头外观完全一致。由于表头表格使用绝对定位,会浮动在数据表格上方,完全覆盖住数据表的的表头。
2、当拖拽垂直滚动条时,表头表格不动,产生了垂直方向锁定表头的效果。
3、设置一个定时器,定时检查外层容器的scrollLeft,如果和表头容器的scrollLeft不一致,就把这个值设置给表头容器,使表头表格保持和数据表格同时横向滚动。

这个做法在IE7下是没问题的,但是因为涉及到表头表格的宽度调整、容器绝对定位这些做法,跨浏览器兼容就麻烦了。

请教大家有什么好的建议?有没有例子?

------解决方案--------------------
这么多东西怎么看!界面很不友好.
最好用分页,或用条件来限制行数.
------解决方案--------------------
楼主的做法应该是搞复杂了……http://www.cnblogs.com/jacktu/archive/2008/01/11/1035760.html