表の本体部分のスクロール・プロパティーが機能しない

Question

ヘッダーを位置およびスクロール内容に固定する必要がある表があります。

私はsepparateテーブルを使って最初にheadeingを行い、body部分はscrollプロパティが与えられたdivの中にある2番目のテーブルを使ってスクロールする方法を見つけました。

しかし、列の数が増えている場合、第1の表の見出しと第2の表の見出しを合わせるのが難しくなります。

なぜ私はtbodyでスクロールを作成する必要があります。しかし、それは動作していません。私はtbody部分にスクロールプロパティを与えようとし、その高さを固定しようとしましたが、スクロールしていません。

私が修正しようとしているコードは、

<table width="900" border="1" cellspacing="0" cellpadding="0"> 
<thead> 
    <tr> 
    <th scope="col">h1</th> 
    <th scope="col">h2</th> 
    <th scope="col">h3</th> 
    <th scope="col">h4</th> 
    <th scope="col">h5</th> 
    <th scope="col">h6</th> 
    </tr> 
    </thead> 

    <tbody style="height:5px; overflow:scroll;"> 
    <tr> 
    <td height="10">1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>6</td> 
    </tr> 
    <tr> 
    <td height="10">7</td> 
    <td>8</td> 
    <td>9</td> 
    <td>0</td> 
    <td>1</td> 
    <td>2</td> 
    </tr> 
    <tr> 
    <td height="10">3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>6</td> 
    <td>7</td> 
    <td>8</td> 
    </tr> 
    <tr> 
    <td height="10">9</td> 
    <td>0</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    </tr> 
    </tbody> 
</table> 

され、2つのテーブルを使用して固定されたヘッダを作成するコードが

<table width="900" border="1" cellspacing="0" cellpadding="0"> 
<thead> 
    <tr> 
    <th scope="col">h1</th> 
    <th scope="col">h2</th> 
    <th scope="col">h3</th> 
    <th scope="col">h4</th> 
    <th scope="col">h5</th> 
    <th scope="col">h6</th> 
    </tr> 
    </thead> 
    </table> 
<div style="height:50px; overflow-y:scroll; width:920px;"> 
<table width="900" border="1" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td height="10">1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>6</td> 
    </tr> 
    <tr> 
    <td height="10">7</td> 
    <td>8</td> 
    <td>9</td> 
    <td>0</td> 
    <td>1</td> 
    <td>2</td> 
    </tr> 
    <tr> 
    <td height="10">3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>6</td> 
    <td>7</td> 
    <td>8</td> 
    </tr> 
    <tr> 
    <td height="10">9</td> 
    <td>0</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    </tr> 
</table> 

Answer 1

であるが、この

<table width="900" border="1" cellspacing="0" cellpadding="0"> 
<thead> 
    <tr> 
    <th scope="col">h1</th> 
    <th scope="col">h2</th> 
    <th scope="col">h3</th> 
    <th scope="col">h4</th> 
    <th scope="col">h5</th> 
    <th scope="col">h6</th> 
    </tr> 
    </thead> 

<tbody> 
<tr> 
    <td height="10" colspan="6"> 
    <div style="height:5px; overflow:scroll;"> 
     <!--put your new table here (content of tbody)--> 

    </div> 
</td> 
</tr> 

のようにそれを試してみてください