可滚动的HTML表格,顶行和左列已冻结

有一个很好的例子 http://ajaxian.com/archives/freeze-pane-functionality 这应该很容易复制。一定要注意这些评论——许多用户对改进脚本提出了有用的建议。

根据@nirk的请求,与活动演示的直接链接位于 http://www.disconova.com/open_source/files/freezepanes.htm .

使用这样的基本结构-

table
  row
    column (blank)
    column
      table (1 row high, column headers)
  row
    column 
      table (1 column wide, row headers)
    column
      div (fixed height & width, overflow auto)
        table (actual data)

设置固定的表格布局,并显式指定以像素为单位的列宽。你应该能够达到同样的效果。

我使用了此版本(用于甘特图样式显示)。

它使用3个表:1个用于左列(行),1个用于顶部(列),然后是数据。

你需要努力使细胞与它们匹配的细胞大小相匹配。( table layout-fixed 可以帮助实现这一点)。

然后将表格放置在一些分隔符中;左侧和顶部分隔符具有(如上所述)高度和宽度以及 overflow-auto 在他们的CSS中。

然后你挂上一些javascript来同步左/上div和内部div的滚动…

我记得有一点“诅咒然后再试一次”,但是它可以用最少的JS来完成。

高温高压

如果您使用jquery,那么有很多固定头表的插件。

你需要 Scrollable (jQuery插件)

Demo is here