代码之家  ›  专栏  ›  技术社区  ›  Jon

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

  •  11
  • Jon  · 技术社区  · 16 年前

    是否有人能够在HTML中实现一个可滚动表,其中的顶行和左列是冻结的,而表的其余部分是可滚动的?一个很好的例子是: Google Squared

    我试图对谷歌平方表的代码进行反向工程,但到目前为止我还没有成功。

    注意:我需要同时冻结顶行和左列的功能。

    5 回复  |  直到 11 年前
        1
  •  3
  •   anschauung    11 年前

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

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

        2
  •  1
  •   Chetan S    16 年前

    使用这样的基本结构-

    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
  •  0
  •   axel_c    15 年前

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

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

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

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

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

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

    高温高压

        4
  •  -1
  •   usoban    16 年前

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

        5
  •  -1
  •   Thinker    16 年前

    你需要 Scrollable (jQuery插件)

    Demo is here