0

可能重复：
我需要我的 html 表格的主体滚动并且它的头部保持不动

我有一个基本表：

<div>
    <table>
        <thead><tr><th>col 1</th><th>Col 2</th></tr></thead>
        <tbody><tr><td>sweet</td><td>tooth</td></tr></tbody>
    </table>
</div>

因此，我在正文部分有 200 行，并且想要制作它，以便当我滚动时，thead 部分保持在顶部，而其他所有内容都在其下方流动。无论如何在CSS中可以做到这一点？

以下款式：

div {
    max-height:400px;
    overflow:auto;
}

我不知道该怎么做。我试图使滚动部分只是 tbody，但是当我这样做时，由于某些奇怪的原因，最大高度部分不会生效。此外，如果我将其分成 2 个表，那么列的宽度将不正确。我也不能事先说明宽度是多少，因为数据变化很快，所以它需要能够改变。

有任何想法吗？我迷路了。

4

3 回答 3

2

编辑：实际上，这似乎破坏了标题和表格之间的连接，因此标题列不对齐。我会把它留在这里，以防有人可以让它工作。

这个怎么样。标头已渲染position:absolute，因此不会移动。但是你必须明确地把桌子放下来给它空间。

.relative {
    position:relative;   
}
.table {
    margin-top:18px;
    max-height:400px;
    overflow:auto;
}
thead {
    position:absolute;
    top: -18px;
}

​​​ 

<div class="relative">
    <div class="table">
        <table>
            <thead><tr><th>col 1</th><th>Col 2</th></tr></thead>
            <tbody>
                <tr><td>sweet</td><td>tooth</td></tr>
            </tbody>
        </table>
    </div>
</div>​

将 18px 更改为您的头部高度。工作样本：http: //jsfiddle.net/EYjd5/1/

于 2012-08-19T19:50:41.480 回答
0

如果您是 jQuery 爱好者，您可以使用DataTables jQuery 插件来实现这一点。

于 2012-08-19T19:55:39.473 回答
0

One of the possible methods is to create another table inside the main tbody, limit its height, and make sure you get scrollbars on overflow by using overflow: scroll;. Of course, for the columns to line up, you need to imitate the effect of the table header, I did that by inserting a hidden row identical to the header in the end of the new table (you should hide it using visibility: hidden; opacity: 0; not using display: none; otherwise this won't work). Here's a sample:

HTML:

<table>
    <thead><tr><th>Name of show</th><th>Greatness</th></tr></thead>
    <tbody><table class = "limitedcontent">
        <tr><td>Glee</td><td>100%</td></tr>
        <tr><td>Glee</td><td>100%</td></tr>
        <tr><td>Glee</td><td>100%</td></tr>
        <tr><td>Glee</td><td>100%</td></tr>
        <tr><td>Glee</td><td>100%</td></tr>
        <tr><td>Glee</td><td>100%</td></tr>
        <tr><td>Glee</td><td>100%</td></tr>
        <tr class = "placehold"><th>Name of show</th><th>Greatness</th></tr>
    </table></tbody>
</table>

CSS:

.limitedcontent {
    height: 150px; /*or whatever your limit is*/
    overflow-y: scroll;
    overflow-x: hidden;
    display: inline-block;
}
.placehold {
    visibility: hidden;
    opacity: 0;
    height: 0px;
    overflow: hidden;
}

And a little demo: little link.

I hope that helped in any manner!

于 2012-08-19T20:20:20.730 回答