如何使用 CSS 制作带有固定标题的可滚动表

我想让我的表头固定。表存在于可滚动的 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>

332433 次浏览
小开

I can think of a cheeky way to do it, I don't think this will be the best option but it will work.

Create the header as a separate table then place the other in a div and set a max size, then allow the scroll to come in by using overflow.

table {
width: 500px;
}


.scroll {
max-height: 60px;
overflow: auto;
}
<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>

小开

What you want to do is separate the content of the table from the header of the table. You want only the <th> elements to be scrolled. You can easily define this separation in HTML with the <tbody> and the <thead> elements.
Now the header and the body of the table are still connected to each other, they will still have the same width (and same scroll properties). Now to let them not 'work' as a table anymore you can set the display: block. This way <thead> and <tbody> are separated.

table tbody, table thead
{
display: block;
}

Now you can set the scroll to the body of the table:

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

And last, because the <thead> doesn't share the same width as the body anymore, you should set a static width to the header of the table:

th
{
width: 72px;
}

You should also set a static width for <td>. This solves the issue of the unaligned columns.

td
{
width: 72px;
}

Note that you are also missing some HTML elements. Every row should be in a <tr> element, that includes the header row:

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

I hope this is what you meant.

jsFiddle

Addendum

If you would like to have more control over the column widths, have them to vary in width between each other, and course keep the header and body columns aligned, you can use the following example:

    table th:nth-child(1), td:nth-child(1) { min-width: 50px;  max-width: 50px; }
table th:nth-child(2), td:nth-child(2) { min-width: 100px; max-width: 100px; }
table th:nth-child(3), td:nth-child(3) { min-width: 150px; max-width: 150px; }
table th:nth-child(4), td:nth-child(4) { min-width: 200px; max-width: 200px; }

提交答案