Skip to content →

【jquery.floathead】テーブルのヘッダーを固定してスクロールできるようにする方法

tableで行数が多いと下の方に行った時にヘッダー(見出し)が見えなくなります。そうすると、また上に戻ってヘッダーを確認しなければならず不便きわまりありません。

今回はそんな時に、ヘッダーを固定してくれるjQueryライブラリ「jquery.floathead」をご紹介します。

jQuery.floatTheadの使い方

ひとまず、デモはこちらから。右上のRun floatTheadを押すと、テーブルの見出し固定がどんなものか試すことができます。

まず、下の方にあるDownloadコーナーで、ファイル一式をダウンロードしましょう。次に解凍したらdistフォルダに入っているjquery.floatThead.min.jsを読み込ませます。あとはテーブルに適用するだけ。

<script>
$(function ()
{
var $table = $('.table');
$table.floatThead();
});
</script>

<table class="table">
<tr>
...(省略)
</table>

とてもかんたんです。そうすると下のようにヘッダーが固定されます。

scroll2

jquery.floathead

[sc name=”engeneer”]

SHARE

PROFILE

入江 慎吾
イリテク株式会社代表取締役 / メンターマッチングサービスMENTAを運営(月間流通額700万突破)/ 累計20個以上のWEBサービスやアプリを開発 / CAMPFIREとコミュニティツールVoyageを共同開発中 / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営(詳しいプロフィール)

SPONSER

Published in コラム 開発奮闘記