5

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

表是这样设置的：

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

最好的方法是什么？

4

2 回答 2

18

我刚刚更新了一个我写的插件，它可以做到这一点：

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

这可能是你需要的

于 2013-09-05T20:46:23.357 回答
1

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

当用户使用 jQuery 将表头滚动到视图之外时，表头保持固定在顶部

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

看看这个 jsFiddle 看看我的意思。

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

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

于 2013-09-05T19:24:41.893 回答