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

时间:2013-05-07 16:19:34

标签: html css

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

然而,我的桌子在y方向上也非常大,所以当我向下滚动时,该人的名字也应该向上滚动他的详细信息。 This几乎解决了我的问题,但不是垂直滚动。

请帮忙!

2 个答案:

答案 0 :(得分:0)

对于垂直滚动,问题是保持页眉和页脚固定。实现此目的的最佳方法是实际拥有三个表 - 一个用于标题,一个用于数据(在可滚动的DIV中),一个用于页脚。如果表格列宽是固定的,那么这就是你需要做的。如果不是,那么您将需要使用JavaScript来调整它们。但是这里有一个技巧 - 无法保证具有AUTO列宽的表使用您在JS中指定的宽度,特别是如果列为空,或者标题文本项很长。

我通过根据数据设置标题宽度,查找浏览器是否调整大小然后更改数据宽度来处理此问题。一旦它们接近我,然后将表格设置为FIXED模式进行最终调整。

看看这里:

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

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

对于固定列,您可以执行类似的操作:使用两个表并使用offsetTop为1来设置另一个的scrollTop。查看当您对具有空行的列进行排序时,我的表如何设置顶行,或者在标签之间交换时保存和恢复Ajax版本中的当前行。

答案 1 :(得分:0)

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

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

您可以在此处查看完整的解决方案:http://rajputyh.blogspot.in/2011/12/floatingfixed-table-header-in-html-page.html 几乎没有与浏览器相关的问题也在那里处理。