如何在 HTML 表格上复制“冻结窗格”功能？

Question

我正在为我的工作开发的 ASP.NET 项目中有一个小部件。它必须是 300 像素宽，不能再宽了。不幸的是，事实证明，对于这么小的小部件，他们想要的东西相当复杂。这是我现在拥有的：

http://www.codetunnel.com/content/images/widget/currentWidget.jpg

如您所见，这是一个 jQuery UI 手风琴控件。随着每个手风琴窗格的展开，将进行 ajax 调用以异步加载其内容。现在它会输出一个包含所需数据的 HTML 表。该表位于样式为 overflow: auto; 的 DIV 中，因此我们在底部和右侧都有滚动条。

我的问题是我想要一些非常自定义的功能（比如 excel 中的冻结窗格功能）。左右滚动时，我希望包括标题在内的所有行左右滚动除了最左边的列“产品名称”。像这样：

http://www.codetunnel.com/content/images/widget/scrollRight.jpg

上下滚动时，我希望所有列，包括左列，都可以上下滚动除了的标题行。像这样：

http://www.codetunnel.com/content/images/widget/scrollDown.jpg

实现此功能的最佳方法是什么？或者有什么办法？

Answer 1

我构建了一些类似的东西，但简单得多：我希望表格的第一行（标题）被冻结，而数据行垂直滚动。我将它实现为 2 个不同的表格，每个表格都有固定宽度的单元格，每个单元格都在自己的 DIV 中。 “header” div 只是静止不动，“body” div 使用 overflow:auto 来滚动。

您的问题更复杂，因为您想在两个轴上“冻结窗格”，并支持在两个轴上滚动（我有更多的空间可以使用，并且不必考虑水平滚动全部）。不过，我想知道您是否可以从那个位置开始工作……

定义4个div：

• NW：这个永远不会滚动。这是您示例中的“产品名称”单元格
• NE：这个只能水平滚动。这是您示例中的顶部/标题行
• SW：这个只能垂直滚动。这是您示例中的左侧列
• SE：这个可以双向滚动。这是您示例中的主要数据网格

使用 4 个 DIV，您将处理 4 个不同的表格，因此我们需要保持它们的单元格宽度和单元格高度同步。理想情况下，如果我们可以将它们设为固定值，我们可以在渲染时执行此操作。否则，我们也许可以编写一些客户端 jquery/JS 来在页面首次加载（或调整大小）时迭代 SE 表中的单元格，并强制其他表的大小与它们匹配。

有了 4 个 DIV，我们还需要同步滚动：当 SE 水平滚动时，NE 必须滚动到相同的位置。当 SE 垂直滚动时，SW 必须滚动到相同的位置。我怀疑必须有一些我们可以挂钩的客户端滚动事件，以检测 SE 何时滚动。在这些事件中，我们应该能够强制 NE 和/或 SW 以相同的方式滚动。

对不起，这是一个如此模糊/抽象的回应。实现这样的事情的本质需要更多的时间，而不是我可以轻松地从我的主要工作中偷走。但这是我脑子里一直在喋喋不休的东西，所以想和你分享一下。我希望它至少能让你更接近解决方案。干杯！

Answer 2

这是tbody 可以在固定大小的表格中解决的问题吗？看来你可以把overflow:auto放在tbody上。