具有冻结左列的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添加到div来解决问题。您可能仍需要进行一些小的边距和填充调整，以使表格看起来恰到好处;但它的确有效！我也更新了小提琴。