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

簡単: 最初に head 用に個別の div を作成し、その div ei に id を指定してください。次に、css ルールで #head{position:fixed;} を作成して、問題を解決してください。

Answer 2

どうぞ。

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/