滚动期间表头需要保持固定[重复]

Posted 2023-03-06

【中文标题】滚动期间表头需要保持固定[重复]

【英文标题】：Table header needs to remain fixed during scrolling [duplicate]

【发布时间】：2013-09-09 17:48:35

【问题描述】：

我有一个带有标题和正文的表格，我希望表格标题在正文上发生滚动时保持固定。

表格是这样设置的：

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>

        ...more rows for data...

    </tbody>

表格用 a 封装，CSS 如下：

overflow-x: hidden;
overflow-y: auto;
height: 400px;

我需要表格标题保持完全静止，但是当我添加 position:fixed;标题被压扁。

最好的方法是什么？

【问题讨论】：

我可以推荐一个很酷的定位资源 - learnlayout.com。一般来说，我会选择 position:fixed，正如 Jason 在下面回答的那样。

因为我写了一个插件来做到这一点，我可以说固定定位是一个非常重要但很小的部分

@cdub 你能和我分享一些代码吗，比如它如何使用 html 和脚本代码

【参考方案1】：

如果您需要您的表格包含任何动态数据以使您无法指定宽度，则必须使用如下 JS/jQuery 解决方案：

Table header to stay fixed at the top when user scrolls it out of view with jQuery

如果您确切知道将要显示的内容并且不介意进行一些调整/修改，您可以只设置thead position:fixed，然后将间距弄乱，直到看起来不错。

Take a look at this jsFiddle to see what I mean.

编辑：这是一个更新的 jsFiddle，间隔更好一些，因为 OP 懒得为自己输入几个字符，并希望其他人为他做所有事情。

http://jsfiddle.net/yXTD9/1/

【讨论】：

JSFiddle 不是我的意思，因为您的标头与您的数据不匹配。查看第 2 列和第 3 列。

您是把代码弄乱了，还是只是看了一下页面，看看工作是否为您完成？你到底有没有看过我的帖子？

这个问题不能用纯 css 解决，如果你想要一个通用的解决方案.. 请参阅：jsfiddle.net/yXTD9/2 并滚动到页面底部。或jsfiddle.net/yXTD9/3：P

【参考方案2】：

我刚刚更新了一个我写的插件来做这件事：

http://mkoryak.github.io/floatThead/

这可能是你需要的

【讨论】：

您好，我已将您的插件用于固定标题，并且效果很好。我想在水平滚动时固定第一列。您对此有什么建议，我如何在垂直和水平滚动时同时实现固定标题和固定第一列。希望你能尽快给我一些解决方案。在此先感谢...

google 一下，可能有一个插件可以锁定第一列，与我的插件很好地配合使用。我的插件不会锁定第一列，永远不会

@mkoryak 嘿先生，你能分享一个带有修复标题的滚动表格主体的小源代码吗，因为我去了你的链接，但没有完美的例子表明没有html

不，我不能，这是个愚蠢的问题。