0

こんにちは私は固定テーブルヘッダーの戦略が必要です、

主に特定の機能の制約のために、私にとってうまくいかなかった戦略は次のとおりです。

  • ヘッダーをコピーし、スクロールトップに従ってヘッダーを移動します

（これで私が抱えている問題は、ヘッダーにある入力テキストが原因です。ヘッダーを複製すると、入力フォームも複製され、サーバー側は常に間違ったセッション値を取得します。）

  • オーバーフローyを使用して、コンテンツをスクロールさせます

（これの問題はセルサイズが原因で、一部のセルサイズはヘッダーのサイズに依存します。したがって、position：absoluteを実行すると、セルのサイズはセルは動的に生成されるため、固定長の割り当ては実際に考えられます）

PS：なぜjQueryプラグインを使用しなかったのか、私に聞かないでください。レガシーコードの上にコーディングする必要があります。私は明らかにアイデアが不足しています。

4

1 に答える 1

1

編集：

これを参照してください（私の提案ではありません）

これは私にとってはうまくいきます（クロームとファイアフォックスで）。私はその非常に悪いアプローチを推測しますが、共有する価値があります。

マークアップ：

<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 に答える