PAGETOP

【jQuery】テーブルの見出しがスクロールに付いてくる方法

2015年9月18日

【jQuery】テーブルの見出しがスクロールに付いてくる「jquery.stickyheader.js」

テーブルで大量のデータを見せたい時におすすめなjQueryプラグイン「Sticky Table Headers」をご紹介します。縦や横に長いテーブルでも、スクロールで追随して表示されるので、常に項目と値を対比させながら見せることができる便利なプラグインです。

1.ダウンロード

「DOWNLOAD SOURCE」からソース一式をダウンロードします。

サンプルとして、スクロールで行見出しが追随するもの、行見出しと列見出し両方が追随するものが入っています。

2.実装

HTMLに テーブルを記述します。
ここでは、サンプルの表をそのまま使いました。
bodyの閉じタグ直前でjQuery本体、jquery.ba-throttle-debounce.min.js、jquery.stickyheader.jsを読み込みます。
jquery.ba-throttle-debounce.min.jsは、イベントの処理を軽くしてくれるプラグインです。

◆HTML



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script> 
<script src="js/jquery.stickyheader.js"></script> 


CSSは3ファイルが格納されていますが、必要なのはcomponent.cssのみです。
head内で読み込みます。

◆HTML



<link rel="stylesheet" type="text/css" href="css/component.css" />


には特に何も追加する必要はなく、基本的にこれだけで実装できます。
さらに

にoverflow-yクラスを追加することで、テーブルの縦の長さをコンパクトに表示することができます。

◆HTML



<table class="overflow-y">


データ量の多いテーブルも、これならコンパクトなスペースに掲載することができますね。
機会があればぜひ活用してみてください。