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

This question already has an answer here:

这个问题在这里已有答案：

How to add a scrollbar to an HTML5 table? 14 answers
如何将滚动条添加到HTML5表？ 14个答案

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>

2 个解决方案

#1

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.

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

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

的jsfiddle

#2

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中并设置最大大小，然后使用溢出允许滚动进入。

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>

#1

table tbody, table thead
{
    display: block;
}