HOME > 開発メモ > 超簡単!テーブルのヘッダーを固定してjQueryでスクロールできるようにする方法!
2016/12/21 (2017/02/08更新) タグ: ,

超簡単!テーブルのヘッダーを固定してjQueryでスクロールできるようにする方法!

  • このエントリーをはてなブックマークに追加

tableで行数が多いと下の方に行った時にヘッダーが見えなくなります。そうすると、また上に戻ってヘッダーを確認しなければならず不便きわまりありません。今回はそんな時に、ヘッダーを固定してくれるjQueryライブラリをご紹介します。

SPONSOR

jQuery.floatTheadを使う

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

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

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

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

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

scroll2

お役にたちましたら、メール購読もどうぞ!

 

この記事をシェアする
  • このエントリーをはてなブックマークに追加

イリテクの最新記事をお届けします

イリテクの最新情報をチェック!
  • follow us in feedly
    RSSで最新記事を読む

イリテクで開発したサービス

こちらの記事もおすすめです

SPONSER

イリテクのプロフィール
入江 慎吾
デザインエンジニア。イリテク株式会社 代表取締役。Webシステム開発、Webサイト制作、スマートフォンアプリ開発を受託で行うほか、自社企画でクラウド見積請求書作成サービス「CLOUD PAPER」を開発・運営。仕様を決めずに少ない予算でも開発をスタートできる「月額固定のシステム開発」を実施中。(もっと詳しく
開発したWebサービス
開発したアプリ
新着記事
カテゴリ/タグ