如何使用CSS固定標題製作可滾動表格

Question

我想讓表格標題固定。表格存在於可滾動的div內。請在此處查看我的代碼：http://jsfiddle.net/w7Mm8/114/請向我建議解決方案。

感謝

我的代碼：

<div style="position: absolute; height: 200px; overflow: auto; "> 
 
    <div style="height: 250px;"> 
 
     <table border="1"> 
 
      <th>head1</th> 
 
      <th>head2</th> 
 
      <th>head3</th> 
 
      <th>head4</th> 
 
      <tr> 
 
       <td>row 1, cell 1</td> 
 
       <td>row 1, cell 2</td> 
 
       <td>row 1, cell 2</td> 
 
       <td>row 1, cell 2</td> 
 
      </tr> 
 
      <tr> 
 
       <td>row 2, cell 1</td> 
 
       <td>row 2, cell 2</td> 
 
       <td>row 1, cell 2</td> 
 
       <td>row 1, cell 2</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div>

Answer 1

我能想到的一個厚臉皮的方式做到這一點，我不認爲這將是最好的選擇，但它會工作。

將標題創建爲單獨的表格，然後將另一個標題放在div中並設置最大尺寸，然後通過使用overflow來允許滾動進入。

HTML：

<table border="1"> 
    <tr> 
    <th>head1</th> 
    <th>head2</th> 
    <th>head3</th> 
    <th>head4</th> 
    </tr> 
</table> 
<div class="scroll"> 
    <table> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>More Text</td><td>More Text</td><td>More Text</td><td>More Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Even More Text Text</td><td>Even More Text Text</td><td>Even More Text Text</td><td>Even More Text Text</td></tr> 
    </table> 
</div> 

CSS：

table { 
    width: 500px; 
} 

.scroll { 
    max-height: 60px; 
    overflow: auto; 
} 

DEMO HERE

Answer 2

你想要做什麼是單獨的表從表的標題的內容。 您只需要滾動<th>元素。 您可以使用<tbody>和<thead>元素輕鬆地在HTML中定義此分隔。
現在表頭和表體仍然相互連接，它們仍然具有相同的寬度（以及相同的滾動屬性）。現在讓他們不再像桌子一樣工作了，你可以設置display: block。這種方式<thead>和<tbody>是分開的。

table tbody, table thead 
{ 
    display: block; 
} 

現在你可以滾動設置表中的身體：

table tbody 
{ 
    overflow: auto; 
    height: 100px; 
} 

而在去年，因爲<thead>不共享相同的寬度身體了，您應該設置一個靜態寬度表頭：

th 
{ 
    width: 72px; 
} 

您還應該設置一個靜態的寬度<td>。這解決了未對齊列的問題。

td 
{ 
    width: 72px; 
} 

---

注意，你也缺少一些HTML元素。每一行應在 <tr>元素，包括標題行：

<tr> 
    <th>head1</th> 
    <th>head2</th> 
    <th>head3</th> 
    <th>head4</th> 
</tr> 

我希望這是你的意思。

jsFiddle