具有顶行和左列冻结的可滚动HTML表

时间:2009-07-08 22:16:41

标签: javascript html scrollable-table

有没有人能够在HTML中实现一个可滚动的表,其中TOP行和LEFT列被冻结,但表的其余部分是否可滚动?一个完美的例子是: Google Squared

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

注意:我需要能够同时冻结TOP ROW和LEFT COLUMN。

5 个答案:

答案 0 :(得分:3)

http://ajaxian.com/archives/freeze-pane-functionality有一个易于复制的工作示例。请务必注意评论 - 许多用户已经为改进脚本提出了有用的建议。

Per @ Nirk的请求,活跃演示的直接链接位于http://www.disconova.com/open_source/files/freezepanes.htm

答案 1 :(得分:1)

使用这样的基本结构 -

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)

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

答案 2 :(得分:0)

我有一个正在使用的版本(用于甘特图表样式显示)。

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

你需要努力让细胞与它们匹配的尺寸相匹配( table layout-fixed可以帮助实现这一目标。)

然后把这些表放在一些div中;左边和上边的div有(如上所述)高度和高度宽度和{c}中的overflow-auto

然后您连接一些javascript以同步左/上div与内部div的滚动...

我记得有一点'诅咒 - 再试一次',但它可以用最小的js来完成。

HTH

答案 3 :(得分:-1)

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

答案 4 :(得分:-1)

您需要Scrollable(jQuery插件)

Demo is here