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

Question

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

position:absolute

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

这有效，如此处所示：http: //jsfiddle.net/YMvk9/4289/

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

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

Answer 1

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

这是小提琴

你有几个问题：

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

希望有帮助！

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