如何使用固定标题使用CSS制作可滚动表格
我想让我的表头固定。表是存在于滚动div。请参阅我的代码在这里： http : //jsfiddle.net/w7Mm8/114/亲切的build议我解决这个问题。
谢谢
我的代码：
<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> 你想要做的是从表头中分离表的内容。 你只需要滚动<th>元素。 您可以使用<tbody>和<thead>元素简单地定义HTML中的这个分隔。
现在，表头和主体仍然相互连接，它们仍然具有相同的宽度（以及相同的滚动属性）。 现在，让他们不再作为一个表“工作”，你可以设置display: block 。 这样的话，他们就分开了。
table tbody, table thead { display: block; }
现在，您可以将滚动设置为表格的正文：
table tbody { overflow: auto; height: 100px; }
最后，因为thead不再与body重复同样的宽度，所以你应该在表头设置一个静态宽度：
th { width: 72px; }
您还应该为<td>设置一个静态宽度。 这解决了未alignment列的问题。
td { width: 72px; }
请注意，您还缺less一些HTML元素。 每一行都应该在<tr>元素中，包含标题行：
<tr> <th>head1</th> <th>head2</th> <th>head3</th> <th>head4</th> </tr>
我希望这是你的意思。
的jsfiddle
我可以想到一个厚颜无耻的方式来做到这一点，我不认为这将是最好的select，但它会起作用。
创build标题作为一个单独的表，然后将另一个放在一个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; }
在这里演示
