Question

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

表格设置如下：

<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;对于thead或个人而言，标题会被压扁。

对此最好的方法是什么？

Answer 1

我刚刚更新了一个我写的插件，它确实做了这件事：

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

它可能是你需要的

Answer 2

如果您需要包含任何动态数据的表，以便不能指定宽度，则必须使用如下所示的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/

在滚动期间，表头需要保持固定

2 个答案: