具有冻结左列的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会搞砸表格的方式我删除了该规则并添加了{{ 1}}到padding-left来解决问题。可能还有一些小的差距和您需要做的填充调整才能使表格看起来正确;但它的确有效！我也更新了小提琴。