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

How to make Scrollable Table with fixed headers using CSS

提问by Xavi

I want to make header of my table fixed.Table is present inside the scrollable div.Please see my code here: http://jsfiddle.net/w7Mm8/114/kindly suggest me the solution to this.

我想让我的表头固定。表存在于可滚动 div 中。请在此处查看我的代码：http: //jsfiddle.net/w7Mm8/114/请建议我解决此问题。

Thanks

谢谢

My Code:

我的代码：

<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>

回答by nkmol

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.

您要做的是将表格的内容与表格的标题分开。您只想<th>滚动元素。您可以使用<tbody>和<thead>元素在 HTML 中轻松定义这种分隔。
现在表格的标题和正文仍然相互连接，它们仍然具有相同的宽度（和相同的滚动属性）。现在让他们不再“工作”作为一个表，你可以设置display: block. 这样就<thead>和<tbody>分开了。

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:

最后，因为<thead>不再与主体共享相同的宽度，您应该为表格的标题设置一个静态宽度：

th
{
    width: 72px;
}

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

您还应该为<td>. 这解决了未对齐列的问题。

td
{
    width: 72px;
}

---

---

请注意，您还缺少一些 HTML 元素。每一行都应该在一个<tr><tr>元素中，包括标题行：

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

I hope this is what you meant.

我希望这就是你的意思。

jsFiddle

js小提琴

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; }

回答by Ruddy

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.

将标题创建为单独的表格，然后将另一个放在 div 中并设置最大大小，然后使用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>