表格不能正常工作的滾動屬性

Question

我有一個表格，其中的標題應該固定在它們的位置並滾動內容。

我找到了通過使用第一個headeing使用sepparate表來滾動它們的方法，並且使用第二個表格的body部分，它在給定scroll屬性的div內。

但是，當列數增加時，將第一個表中的標題和第二個表中的內容進行排序變得困難。

這就是爲什麼我被迫在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>