html - 滚动时如何使表格标题保持静态

Question

这个问题已经出现过很多次了。我希望在向下滚动时固定表格的标题，我该怎么做？我的表格代码如下所示

<table class="specifictableheight table table-striped">
<h3>TEST</h3>
<thead>
<tr>
<th>Places</th>
<th>Hits</th>
</tr>
</thead>
<tbody>
<?php
foreach ($top3overRestaruants as $key => $value)
{
?>
<tr class="<?= $isactive ? 'alert-success' : ''; ?>">
<td><?= $key ?></td>

<td><?= $value ?></td>
</tr>
<?php
}
?>
</tbody>
</table>

Answer 1

干得好。

HTML：

<div class="wrapper">
    <table class="specifictableheight table table-striped">
        <h3 class="table_title">TEST</h3>
        <br />
        <thead>
            <tr class="tr_first">
                <th>Places</th>
                <th>Hits</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
        </tbody>
    </table>
</div>

CSS：

.table_title {
    position: fixed;
    background: #000;
    color: #fff;
}

.tr_first {
    top: 150px;
    position: relative;
}

.wrapper {
    height: 150px;
    overflow: scroll;
}

jsfiddle 上的演示：http: //jsfiddle.net/q2jRu/

Answer 2

简单：请先为 head 制作单独的 div 并为该 div ei 提供 id 然后在 css 规则中制作 #head{position:fixed;} 现在解决您的问题。