固定ヘッダーテーブル、サイズ変更可能なDIVの100％の高さを占めるスクロール可能なボディ

Question

私は、固定ヘッダーを効果的に持ち、ヘッダー行が静的なままスクロールできるようにするテーブルを持っています。さらに、ヘッダー行がレンダリングされた後に残っている包含​​要素の残りの高さを、表の本体セクションで使用するようにします。私はいくつかやった

<table> 
    <thead> 
     <tr> 
      <th>Heading 1</th> 
      <th>Heading 2</th> 
      <th>Heading 3</th> 
      <th>Heading 4</th> 
      <th>Heading 5</th> 
     </tr> 
    </thead> 
</table> 
<div style="overflow:scroll"> 
    <table> 
     <tbody> 
      <tr><td /><td /><td /><td /><td /></tr> 
      <tr><td /><td /><td /><td /><td /></tr> 
     </tbody> 
    </table> 
</div> 

：

は、これまでのところ、私は2つのテーブルを持って、最初はTHEAD、TRと複数回目が含まれている、第二には、複数のTD、そうなどとのそれぞれは、複数のTRとのtbodyが含まれています問題は、ヘッダを含むテーブルとテーブルの両方で絶対位置を設定することであるDIVに次のようにスタイルを設定すると、その含有元素

position:absolute; 
height:auto; 
top:0; 
bottom:0; 

の高さまで拡張させることを研究が判明ボディーを含んでいると、0、0でレンダリングするように設定されます。含有元素に含まれる。私はCSSトッププロパティのピクセル値を指定することができますが、これはより厳格になります。

私はこのすべてを達成するのに役立つかもしれないと考えていない、いくつかの重要なCSSの位置付け値または組み合わせがありますか？

Answer 1

CSSのトッププロパティのピクセル値を指定することはできますが、これにより剛性が増します。

はい、このはですが、それはいいですか？

これは本当に唯一の解決策です。