顶行和左列冻结的可滚动 HTML 表格答案

【问题标题】：Scrollable HTML table with top row and left column frozen顶行和左列冻结的可滚动 HTML 表格
【发布时间】：2010-11-09 04:57:46
【问题描述】：

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

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

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

【问题讨论】：

链接已损坏。能不能提供一个新的，因为我很好奇这样的表有什么实用价值。

标签： javascript html scrollable-table

【解决方案1】：

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

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

【讨论】：

有没有人找到更好的方法？我正在处理一些巨大的数据集，因此这些表包含大量数据，将这些数据克隆最多 4 次根本行不通。 jQuery 有什么方法可以达到同样的目的吗？
我故意链接到这篇文章——Cmets 提供了很多有用的改进，发帖者应该考虑，IMO。

【解决方案2】：

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

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

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

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

然后你连接一些 javascript 来同步左侧/顶部 div 的滚动与内部 div...

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

第

【讨论】：

【解决方案3】：

你需要Scrollable（jQuery 插件）

Demo is here

【讨论】：

演示在我的浏览器（chrome）中被破坏了

【解决方案4】：

使用这样的基本结构-

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)

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

【讨论】：

如果你想让单元格内容决定单元格尺寸（即使用默认的表格布局）怎么办？

【解决方案5】：

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

【讨论】：