当您可以'；我不使用JQuery，而且CSS功能非常有限

嗨，我需要一个固定表头的策略

以下是对我不起作用的策略，主要是由于某些功能限制：

• 复制标题并根据scrolltop移动标题

（这个问题是因为标题中有输入文本。当我克隆标题时，它也会克隆输入表单，服务器端总是得到错误的会话值。）

• 使用overflow-y并使内容滚动

（这个问题是因为单元格的大小，一些单元格的大小取决于标题的大小。因此，当我执行position:absolute时，单元格的大小与标题的大小不一致。由于单元格是动态生成的，所以我们认为分配一个固定的长度是非常重要的）

PS：不要问我为什么没有使用jQuery插件，我必须在遗留代码的基础上编写代码。我显然没有什么想法了。

编辑：

<table>
        <thead>
            <tr><th>head1</th><th>head2</th></tr>
        </thead>
        <tbody>
            <tr><td>row1 col1</td><td>row1 col2</td></tr>
            <tr><td>row2 col1</td><td>row2 col2</td></tr>
        </tbody>
    </table>

    table{
        height:2000px;
    }
    thead tr {
         position:fixed;
         left:0;
         top:0;
    }

<div id='wrapper'>
        <table>
            <thead>
                <tr><th>head1</th><th>head2</th></tr>
            </thead>
            <tbody>
                <tr><td>row1 col1</td><td>row1 col2</td></tr>
                <tr><td>row2 col1</td><td>row2 col2</td></tr>
            </tbody>
        </table>
    </div>

#wrapper{
        height:500;
        overflow:scroll;
        width:400px;
        margin:0 auto;
        background:Gray; 
    }
    table{
        height:2000px; 
    }
    thead tr {
        position:fixed; 
        top:0;
    }

（不是我的建议）

这对我很有用（在chrome和firefox上）。我想这是非常糟糕的方法，但值得分享

标记：

<table>
        <thead>
            <tr><th>head1</th><th>head2</th></tr>
        </thead>
        <tbody>
            <tr><td>row1 col1</td><td>row1 col2</td></tr>
            <tr><td>row2 col1</td><td>row2 col2</td></tr>
        </tbody>
    </table>

    table{
        height:2000px;
    }
    thead tr {
         position:fixed;
         left:0;
         top:0;
    }

<div id='wrapper'>
        <table>
            <thead>
                <tr><th>head1</th><th>head2</th></tr>
            </thead>
            <tbody>
                <tr><td>row1 col1</td><td>row1 col2</td></tr>
                <tr><td>row2 col1</td><td>row2 col2</td></tr>
            </tbody>
        </table>
    </div>

#wrapper{
        height:500;
        overflow:scroll;
        width:400px;
        margin:0 auto;
        background:Gray; 
    }
    table{
        height:2000px; 
    }
    thead tr {
        position:fixed; 
        top:0;
    }

---

编辑（评论后）

标记：

<table>
        <thead>
            <tr><th>head1</th><th>head2</th></tr>
        </thead>
        <tbody>
            <tr><td>row1 col1</td><td>row1 col2</td></tr>
            <tr><td>row2 col1</td><td>row2 col2</td></tr>
        </tbody>
    </table>

    table{
        height:2000px;
    }
    thead tr {
         position:fixed;
         left:0;
         top:0;
    }

<div id='wrapper'>
        <table>
            <thead>
                <tr><th>head1</th><th>head2</th></tr>
            </thead>
            <tbody>
                <tr><td>row1 col1</td><td>row1 col2</td></tr>
                <tr><td>row2 col1</td><td>row2 col2</td></tr>
            </tbody>
        </table>
    </div>

#wrapper{
        height:500;
        overflow:scroll;
        width:400px;
        margin:0 auto;
        background:Gray; 
    }
    table{
        height:2000px; 
    }
    thead tr {
        position:fixed; 
        top:0;
    }

---

听起来是时候重构了。我有一个想法，就是从标题中检索单元格宽度，然后以某种方式调整主体单元格的大小。。。这有点过头了。。。但如果有人有更好的想法，我愿意接受建议：我以前试过这个，不幸的是，我不得不提到另一个问题。表格在弹出窗口内，当我使用position:固定在标题上时，它出现在弹出窗口外。所以这个固定的位置对我来说是不合适的…：*（此外，我还试着玩z-index，希望它不会溢出弹出窗口。我想我还不太熟悉，无法让它正常工作：我的答案整理好了，现在检查：）哦，使用fixed，还有一个问题。。。固定标题将响应页面滚动，而不是弹出窗口；因此，当用户使用“其他滚动”滚动时，固定标题仍然会移动。我只是使用thead，而不是thead tr，但我记得以前尝试过它。。。我不相信thead tr在firefox中会有固定的头