在水平滚动时保持表中的一列固定，但也要垂直滚动

Question

我在一个可滚动的div中有一个很大的表。该表包含一个人的姓名，后面是他的详细信息。我需要表格的第一列保持固定，同时水平滚动，以便人的名字保持可见，同时查看他的详细信息。与此类似：HTML table with horizontal scrolling (first column fixed)

但是，我的表格在y方向上也很大，所以当我向下滚动时，人名也应该与他的详细信息一起向上滚动。This几乎解决了我的问题，但不是垂直滚动。

请帮帮我！

Answer 1

我试图解决表在其他DIV控件中的固定列问题。在解决这个问题时，我遇到了同样的问题，并通过在"onscroll“事件的ScrollTop属性中设置容器找到了解决方案。我将下面的样式应用于容器：

.floatingStyle
{
   position:relative;
   background-color:#829DC0;
   top:0px;
} 

你可以在这里找到完整的解决方案：http://rajputyh.blogspot.in/2011/12/floatingfixed-table-header-in-html-page.html有一些浏览器相关的问题也在这里处理。

Answer 2

对于垂直滚动，问题是保持页眉和页脚固定。要做到这一点，最好的方法是实际拥有三个表-一个用于标题，一个用于数据(在可滚动的DIV中)，一个用于页脚。如果表列的宽度是固定的，那么这就是您需要做的全部工作。如果它们不是，那么您需要使用JavaScript来调整它们。但这里有一个技巧-不能保证具有自动列宽的表使用您在JS中指定的宽度，特别是当列为空或标题文本项非常长时。

我已经根据数据设置了标题宽度，查看浏览器是否调整了大小，然后更改了数据宽度，从而解决了这个问题。一旦它们关闭，我就会将表格设置为固定模式，以进行最终调整。

看看这里：

http://hifi.goneill.co.nz/cd.php

点击Jazz、Classical按钮等查看表格。另外，请阅读技术说明页面，因为它描述了编码，并尝试使用Ajax版本。

对于固定列，您可以执行类似的操作:拥有两个表，并使用其中一个表的offsetTop设置另一个表的scrollTop。看看我的表在对包含空行的列进行排序时如何设置第一行，或者在选项卡之间交换时如何在Ajax版本中保存和恢复当前行。