0

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

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

  • 复制标题并根据滚动顶部移动标题

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

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

（这个问题是因为单元格大小，一些单元格大小取决于标题的大小。因此，当我执行位置：绝对时，单元格的大小与标头。确实考虑分配固定长度，因为单元格是动态生成的）

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

4

1 回答 1

1

编辑：

参考这个（不是我的建议）

这对我有用（在 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>

CSS：

    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>

CSS：

#wrapper{
        height:500;
        overflow:scroll;
        width:400px;
        margin:0 auto;
        background:Gray; 
    }
    table{
        height:2000px; 
    }
    thead tr {
        position:fixed; 
        top:0;
    }
于 2012-05-21T20:18:53.853 回答