Question

我不知道在引用CSS时它的名称是什么，但在Excel中，您可以冻结窗格（例如标题行），这样当您向下滚动时，您仍然可以看到您正在查看的数据的列标题。在我的网页上，我有一个类似网格的数据。有什么东西可以用来保存数据或我只需要制作两个单独的表并努力使第一个和第二个表的对齐排列？

我也接受jQuery插件或计划旧的js解决方案。

我添加了一些代码来帮助：

<table border="1" class="usertablex" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>City</th>
        </tr>
        </thead>
    <tbody style="height:20px;overflow:scroll;">
        <tr class="subtext">
            <td class="Dwidth175">John Silva</td>
            <td class="Dwidth80" align="center" > New York</td>
        </tr>
        <tr class="subtext">
            <td class="Dwidth175">John Thomas</td>
            <td class="Dwidth80" align="center" > New York</td>
        </tr>
        <tr class="subtext">
            <td class="Dwidth175">Xris</td>
            <td class="Dwidth80" align="center" > New York</td>
        </tr>
        <tr class="subtext">
            <td class="Dwidth175">Bob Denver</td>
            <td class="Dwidth80" align="center" > New York</td>
        </tr>
    </tbody>
</table>

Answer 1

将标题放在thead中，将数据放在tbody中，为tbody定义固定的高度，并为其添加overflow:scroll属性。应该够了。

Answer 2

这是一个名为Pure CSS Scrollable Table with Fixed Header的工作示例。它的工作原理是将tbody元素设置为display:block，overflow:auto，并添加特定的tbody高度。

编辑：它适用于Firefox和Chrome，但IE7,8,9似乎已经破坏了对原始方法的支持。由于<tbody style="display:block; overflow:auto"/>技巧在目标浏览器中不起作用，我认为您需要使用两个表“table-layout：fixed”来保持列宽度刚性或找到一个会破坏的插件单个表自动以相同的方式分成两个（也许仅适用于IE7 +）。

Answer 3

尝试使用position: fixed; css选择器

Answer 4

如果你在标题周围添加一个div，你可以给它一个css

.divname
{
    position:fixed
    top:0;
}

它将保持在屏幕顶部的位置。

Answer 5

我已经在IE8和Chrome OS上测试了这个。这个解决方案有一些缺点，可能需要进一步调整其他浏览器，但我认为这会有所帮助。例如，表必须具有固定的宽度 - 为了具有灵活的宽度，我相信你需要添加一些额外的JS来设置窗口调整大小时的宽度。

基本上我的想法是你将表格包装在几个div中 - 在外部的position: relative;上设置overflow: auto;，在内部的height上设置thead然后克隆{{ 1}}和position: absolute;左上角。

http://jsfiddle.net/ZDeDw/2/

任何人都可以分叉并做出改进 - 只需对其发表评论。

Answer 6

感谢大家的建议，但我发现这更适合我需要的东西。

http://www.farinspace.com/jquery-scrollable-table-plugin/

向下滚动页面时需要显示标题行

6 个答案: