【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>

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

jquery.floathead

[sc name=”engeneer”]

SHARE

• Tweet

スキルアップにMENTA

MENTAはいろんなプロに相談できるNo1メンターサービスです。

僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。

YouTubeでも発信中！

PROFILE

入江 慎吾
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表／個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました／福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 （詳しいプロフィール）