固定ヘッダ、HTML

は、私は、ヘッダ（つまりTR要素である）、それは正常に動作し、固定されたdivのスクロール時に私の問題がある今、この固定ヘッダ、HTML

<div style="overflow:auto"> 
    <table> 
    <thead><tr style="position:fixed"><th></th></tr></thead> 
    </table> 
    </div>

のようなテーブルを持っていたが、私はのスクロールバーをスクロールするときウィンドウのヘッダtrはdiv内に固定されていません。私は、ウィンドウのスクロールバーに沿って移動する...いずれかが解決策を見つけるために私を助けることができますしてください

出典

2012-03-28 Swetha Bindu

1）これはJavascriptと何が関係していますか？ 2）もっとコードを表示できますか？私はdivの上にスクロールバーを表示せず、ウィンドウ上にしか表示されません。 3）テーブルパーツは位置決めのようなものを好きではないので、私はそれがうまく動作するとは期待していませんでした。 –

返信いただきありがとうございます...実際には、divに大きなデータがあります。固定ヘッダーを維持する必要があります。のようなパーセンテージで幅を使用しています。スクロールバーが私の窓のためにも現れるように多くのものが...しかし、私は "固定"として位置を与えていたとき、ウィンドウと共にスクロールします。最後に私の懸念は、テーブルのヘッダーを修正したいということです。 –

もう少し手探りで、divに固定された高さを追加するように、私は2つのスクロールバーを持っていました。そして、はい、 'tr'は' div'ではなくウィンドウに固定されます。しかし、私は解決策があると思う。 –

私は右のあなたの質問を取得していた場合、私は知りませんが、あなたがこの便利http://fixedheadertable.com/

を見つけることができます

出典

2012-03-28 11:27:50 badawym

申し訳ありませんが、私はCSSだけでやろうとしましたが、うまくいかなかったので、少しのJavascriptが必要です。

<div style="overflow:auto; position:relative;" 
    onscroll="document.getElementById('fixedtr').style.top = this.scrollTop+'px';"> 
    <table> 
    <thead> 
     <tr style="position:absolute; top:0; left:0" id="fixedtr"> 
     <th>Table header</th> 
     </tr> 
    </thead>

jsFiddleを参照してください。

これはどのようにしたいのですか？

出典

2012-03-28 12:25:32

あなたの返事をありがとうございます。私はこれを使いました。これは私の問題を部分的に解決しました。私の問題は、このように、幅を変えていくと... ... –

申し訳ありませんこの問題を再現することはできません。幅はどのように変わるのですか？ –

最初にページが読み込まれた後、ヘッダーが正しい幅で表示されます。一度私がヘッダーを下にスクロールすると、私は "SLMG"として要素の幅がSLMGテキストのサイズであるような列を持っていたときに私が意味するように幅を調整します...しかし、私はそれを30％として幅を適用... thats私の問題 –

答えて

関連する問題