如何使用 CSS 制作带有固定标题的可滚动表 [英] How to make Scrollable Table with fixed headers using CSS

问题描述

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

谢谢

我的代码:

解决方案

您要做的是将表格的内容与表格的标题分开.您只希望滚动 元素.您可以使用 和 元素在 HTML 中轻松定义这种分隔.
现在表格的标题和正文仍然相互连接，它们仍然具有相同的宽度(和相同的滚动属性).现在为了让它们不再作为表格工作"，您可以设置 display: block.这样 和 是分开的.

table tbody, table thead{显示:块；}

现在您可以将滚动设置为表格的主体:

table tbody{溢出:自动；高度:100px；}

最后，因为 不再与正文共享相同的宽度，您应该为表格的标题设置一个静态宽度:

th{宽度:72px；}

您还应该为 设置静态宽度.这解决了未对齐列的问题.

td{宽度:72px；}

---

请注意，您还缺少一些 HTML 元素.每一行都应该在 元素中，包括标题行:

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

我希望这就是你的意思.

jsFiddle

附录

如果您想更好地控制列宽，让它们彼此之间的宽度不同，当然还要保持标题和正文列对齐，您可以使用以下示例:

 table th:nth-child(1), td:nth-child(1) { min-width: 50px;最大宽度:50px；}表 th:nth-child(2), td:nth-child(2) { min-width: 100px;最大宽度:100px；}表 th:nth-child(3), td:nth-child(3) { min-width: 150px;最大宽度:150px；}表 th:nth-child(4), td:nth-child(4) { min-width: 200px;最大宽度:200px；}

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.

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>

解决方案

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

这篇关于如何使用 CSS 制作带有固定标题的可滚动表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！