如何使用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