【问题标题】:Keep one column of a table fixed while scrolling horizontally, but also scroll vertically水平滚动时保持表格的一列固定,但也垂直滚动
【发布时间】:2013-05-01 16:39:19
【问题描述】:

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

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

请帮忙!

【问题讨论】:

    标签: html css


    【解决方案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 很少有与浏览器相关的问题也在那里处理。

    【讨论】:

      【解决方案2】:

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

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

      看看这里:

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

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

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-06-10
        • 2023-03-19
        • 2019-03-27
        • 2012-12-25
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多