水平スクロールテーブルはヘッダーの末尾に伸びません

Question

私はヘッダー/テーブルの最後まで拡張するためにボディを取得しようとしている単純なhtmlテーブルを持っています。私はそれが体のためだけに水平スクロールを持っている必要があり、固定ヘッダーがあります。

私はここに問題を示すフィーバーを持っています。

http://jsfiddle.net/ZbdZe/54/

<table border="1" width="100%"> 
<thead > 
<tr> 
<th id="th1" width="50%">first</th> 
<th id="th2" width="50%" >last</th> 
</tr> 
</thead> 
<tbody style="display: block; border: 1px solid green; height: 530px; overflow-y: scroll"> 
<tr> 
<td headers="th1" >Hello</td> 
<td headers="th2" >World</td> 
</tr> 
</tbody> 
</table> 

今それが唯一の最初の見出しをextendes。スクロールでテーブルの全幅を広げる必要があります。ありがとうございこと

Answer 1

これは、固定されたテーブルのヘッダーは、別のテーブルで作成していることです

スクロール

table{ 
 
    border-collapse:collapse; 
 
    width:100% 
 
} 
 
tbody{ 
 
    border: 1px solid green; 
 
    table-layout: fixed; 
 
} 
 
div{ 
 
    height: 66px; /*adjust table body*/ 
 
    overflow-y: scroll 
 
}

<table border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th id="th1" width="39%">first</th> 
 
     <th id="th2" width="50%" >last</th> 
 
    </tr> 
 
    </thead> 
 
</table> 
 

 
<div> 
 

 
<table border=1> 
 
<tbody> 
 
    <tr> 
 
    <td headers="th1" >Hello</td> 
 
    <td headers="th2" >World</td> 
 
    </tr> 
 
    <tr> 
 
    <td headers="th1" >Hello</td> 
 
    <td headers="th2" >World</td> 
 
    </tr> 
 
    <tr> 
 
    <td headers="th1" >Hello</td> 
 
    <td headers="th2" >World</td> 
 
    </tr> 
 
    <tr> 
 
    <td headers="th1" >Hello</td> 
 
    <td headers="th2" >World</td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 

 
</div>

とテーブルのボディのための第二のテーブル