12

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

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

注意：我需要同时冻结顶部行和左侧列的能力。

4

5 回答 5

3

http://ajaxian.com/archives/freeze-pane-functionality有一个工作示例，应该很容易复制。请务必注意评论——许多用户对改进脚本提出了有用的建议。

根据@Nirk 的要求，活动演示的直接链接位于http://www.disconova.com/open_source/files/freezepanes.htm。

于 2009-07-08T23:06:07.850 回答
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)

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

于 2009-07-08T22:39:48.670 回答
0

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

它使用 3 个表：1 个用于左列（行），1 个用于顶部（列），然后是数据。

您需要努力使单元格的大小与它们匹配的单元格匹配（ table layout-fixed可以帮助实现这一点）。

然后将表格放置在一些 div 中；左侧和顶部 div 具有（如上所述）高度和宽度以及overflow-auto它们的 css。

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

我记得有相当多的“诅咒和再试一次”，但它可以用最少的 js 来完成。

hth

于 2009-08-22T09:07:48.440 回答
-1

如果您使用 jQuery，则有很多用于固定头的表格的插件。

于 2009-07-08T22:25:09.230 回答
-1

你需要Scrollable (jQuery 插件)

演示在这里

于 2009-07-08T22:57:01.287 回答