如何实现MS Excel风格＆＃34; Freeze Panes＆＃34;在HTML / CSS中

Question

我在iPad的HTML5 / CSS3 webapp中使用Angular JS，我有一个相当大的表，需要同时具有水平和垂直滚动，以及在MS Excel上找到的“冻结窗格”功能。

现在，我已经实现了一个基于div的布局，将表格分成3个，一个顶部，左侧和中间区域，如图所示。我正在检测可滚动区域（顶部和左侧）上的滚动，然后使用Javascript将中间区域的位置固定为同步。这有效，但是生涩。有没有更清洁的方法来实现这一点？我正在尝试不使用任何插件，因为我的代码已经非常繁重，但如果有轻量级的插件，我也会对这些插件开放。

TIA

Answer 1

我知道你提到不再使用插件了，但无论如何我都会把它扔出去。也许您可以尝试查看Zurb Foundation的响应表插件：http://zurb.com/playground/projects/responsive-tables/index.html

但是，当您使用较小的浏览器宽度时，他们的示例将第一列显示为固定和不可滚动。我看到你想要在屏幕截图方面采用“相反的方式”，因此有必要对代码进行一些攻击。