C# 你如何复制；冻结窗格玻璃“；HTML表上的功能？

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

如您所见，这是一个jQueryUI手风琴控件。当每个accordion窗格展开时，会发出一个ajax调用以异步加载其内容。现在，它会弹出一个包含所需数据的HTML表。表格位于一个DIV中，样式

溢出：auto以便在底部和右侧获得滚动条

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


上下滚动时，我希望所有列（包括左列）上下滚动，但标题行除外。像这样：


实现此功能的最佳方式是什么？或者有办法吗？
我构建了一些类似的东西，但要简单得多：我希望在数据行垂直滚动时冻结表的第一行（标题）。我将它实现为两个不同的表，每个表都有固定宽度的单元格，每个表都位于各自的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以相同的方式滚动

抱歉，这是一个模糊/抽象的回答。实现这样的事情的本质将花费更多的时间，我无法轻松地从我的主要工作中溜走。但这件事一直在我脑海里萦绕，所以我想我可以和你分享一下。我希望这至少能让你更接近一个解决方案。干杯
 这是
tbody
可以在固定大小的表中解决的问题吗？您似乎可以在tbody上放置
overflow:auto
。
+1这是一个很好的问题，图片显示了您正试图实现的目标。而且，因为这看起来是个棘手的问题……）+这是我最喜欢的东西，我可以看到我自己在未来使用。不要道歉，我感谢你的反馈。事实上，这正是我想要走的路线，但由于小屏幕的不动产，我遇到了一些障碍。例如，直到水平条一直向右滚动，垂直条才显示；但这是我自己的代码的问题。我也讨厌必须保持单元格的宽度和高度不变，以便它们匹配。我想我只是希望有一个比四个div和javascript滚动同步更简单的解决方案。谢谢你，+1！是的，这是一个挑战，无论你以何种方式切割它。你可能想看看EXT.JS面板：sencha.com谢谢你的+！我喜欢这个问题来关注它。如果您愿意，我很想听到更多关于如何最终实现它的信息，以及实现的好/坏/丑。：）也许在这里更新一些评论，或者如果你有一个博客，这将是一个非常好的条目。干杯@mikemanne，既然你问了，我想我应该让你知道我们最终改变了小部件。现在它打开了一个灯箱，占据了更多的屏幕空间，这样我们就有了更多的屏幕空间。我不再需要“冻结窗格”功能，但我仍然希望此功能保持打开状态，以便我们可以查看其他人的反馈。@Alex-感谢您的后续行动。我很想知道接下来会有什么样的反馈。如果我觉得自己雄心勃勃（或者最终不得不实现这一点），我可能会在这个问题上悬赏，以增加回答不，这只会使主部分滚动，而不是应该滚动的两个侧部分。还有固定宽度和高度的问题。