具有冻结左列的 HTML 电子表格，可垂直滚动？

Question

我在这里和那里看到了一些使用技巧的例子

position:absolute

在表格的第一列上，然后使表格的其余部分可水平滚动。

这可行，如下所示：http://jsfiddle.net/YMvk9/4289/

但是，一旦我添加了垂直滚动条，您就会看到它不会滚动冻结的窗格，相反，冻结的窗格现在以一种丑陋的方式从表格的其余部分向下伸出。

我需要左侧的冻结列垂直滚动。任何人都可以修复 jsfiddle 代码吗？

Answer 1

假设您希望用户能够垂直或水平滚动表格，有几种方法可以实现此目的。最直接的方法是将您的headcol 单元格放在一个表格中，然后将两个表格放置在彼此相对的位置，然后用overflow:scroll 将它们包装在一个div 中。不过，我确实为您当前的布局提出了修补程序。

这里是FIDDLE

你有几个问题：

1. 您的 overflow 属性仅适用于表格的第二列。
2. 您的包含 div 没有包含任何内容，因为它没有定位规则，所以我给了它一些 绝对定位，并为其分配了 overflow:scroll: 属性。
3. 一旦你绝对定位容器，它就会搞砸long 类，所以我将它分配给float:right; 并给它一个margin-left 来说明headcol 单元格。
4. 最后，由于您要浮动一个元素，您必须使用“清除修复”来确保它不会换行，因此我为每一行添加了一个新类和一个新单元格来修复布局。

希望有帮助！

更新： 发布后我注意到一个问题，将margin-left 添加到您的long 类会破坏表格的外观，我删除了该规则并将padding-left 添加到@ 987654334@ 解决问题。您可能仍然需要做一些小的边距和填充调整，以使表格看起来恰到好处；但它有效！我也更新了小提琴。