Question

我正在开发一个小页面，这是修复表格标题所必需的，当用户滚动时，标题仍然存在。我在jsfiddle中写了一小段代码，我的页面样本，它不起作用，我不知道为什么。我做错了什么？

你可以看到我到目前为止所做的事情here。

Answer 1

将以下内容添加到样式表中：

.PersistentHeader{
      position:fixed;
 }

Answer 2

你需要这样的东西（忽略尺寸和填充，这只是为了我的缘故让它在我传递给你之前工作）：

CSS：

td 
    {
        padding:10px;
        }
        th 
        {
            position:fixed;
            background:black;
            color:White;
            width:378px;
            padding:10px;
            }
     #tableContainer 
     {
         width:400px;
         height:400px;
         overflow-y:scroll;
         overflow-x:hidden;
         border:solid 1px #ccc;
         }
     table 
     {
         width:400px;           
         }

HTML：

<div id='tableContainer'>
<table cellpadding="0" cellspacing='0'>
    <tr>
        <th>Header</th>
    </tr>
    <tr>
        <td>Text</td>
    </tr>
    <tr>
        <td>text</td>
    </tr>
    <tr>
        <td>text</td>
    </tr>
</table>
</div>

Answer 3

好的，花了一些时间来了解你的需求。你想做的事情叫做“浮动表头”。我已经尝试了所有可能的jQuery脚本。我遇到了所有这些问题，但其中一个问题。如果您只是在寻找这个功能，并且您的小提琴代码没有感情价值。然后使用Floating header plugin。它是最先进的浮动标题插件。检查the demo。

根据您的小提琴进行现场演示，添加Floating header plugin：
的 http://jsfiddle.net/2AKMh/16/

Answer 4

我遇到了类似的问题，我遇到了浮动表头行的一些或其他问题。我遇到的一些问题是浏览器特定的，有些问题很明显，例如：浮动标题不会滚动水平滚动在：http://rajputyh.blogspot.in/2011/12/floatingfixed-table-header-in-html-page.html，我试图解决所有常见问题。希望它会有所帮助。

修复表格中的标题

4 个答案: