將HTML表格的幾行和最上面的行凍結

Question

我的頁面上有標題行，然後在頁面上顯示一個表格。我想要凍結表格的頂行和頂行，並將表格放在可滾動的位置。我的桌子沒有<THEAD>元素，我也嘗試過使用positon：固定來凍結標題行和表格的頂行，但只有頂行被固定。我怎樣才能凍結標題行？ TIA

代碼：

<div id="topheader">

<h1> This is header line </h1> 
</div> 
<table ellspacing="0" cellpadding="10" border="1" width="100%" STYLE="empty-cells:show; position:fixed; top:300px;" id="reporttable" > 
<tr class="header"> 
<td align="left"> 
    Field1 
</td> 
<td align="left"> 
    Field2 
</td> 
<td align="left"> 
    Field3 
</td> 
</tr> 
</table> 
<table cellspacing="0" cellpadding="10" border="1" width="100%" STYLE="empty-cells:show;" id="reporttables"> 
<tr class="tbody" > 
<td> 
    Data1 
</td> 
<td> 
Data2 
</td> 
<td> 
Data3 
</td> 
</tr> 
</table> 
</div> 

CSS：

<style> 

    div.topheader{ 
     position:fixed; 
     top:200px; 
    } 
</style> 

Answer 1

據我所知，你不能只用一個表元素做到這一點。

處理此問題的好方法是創建2個表並在表上使用table-layout: fixed屬性，然後在td和th上設置固定寬度。

選中此Demo或下面的代碼片段。

div.div-demo { 
 
    height: 60px; 
 
    overflow-y: scroll; 
 
} 
 

 
table.demo { 
 
    table-layout: fixed; 
 
    border: 1px solid black; 
 
} 
 

 
table.demo td, th { 
 
    width: 80px; 
 
    text-align: left; 
 
}

<table class="demo"> 
 
    <tr> 
 
    <th>Header 1</th> 
 
    <th>Header 2</th> 
 
    <th>Header 3</th> 
 
    </tr> 
 
</table> 
 
<div class="div-demo"> 
 
    <table class="demo"> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
    </tr> 
 
    </table> 
 
</div>