2014/11/27

【jQuery】テーブルヘッダがスクロールしても隠れない『fixed Table Header』の紹介

【jQuery】テーブルヘッダがスクロールしても隠れない『fixed Table Header』の紹介

縦に長いテーブルを見ていると,下へスクロールしていくに従ってテーブルのヘッダが見えなくなってしまい,個々のフィールドが何を表しているかわからなくなる場合があります.

しかし,今回紹介する『fixed Table Header』を使用することで,スクロールに追従してウインドウ上部に表示させ続けることが出来ます.

目次

入手方法

https://github.com/hungnq1989/fixed-table-headerにアクセスし,右側のDownload ZIPをクリックし,ダウンロードします.

ダウンロードしたZipファイルを解凍しておきます.

使用方法

解凍したファイルの中から,『jquery.fixedTableHeader.js』を,jQuery本体とともに読み込みます.

<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="jquery.fixedTableHeader.js"></script>

テーブルには特に何も手を加えずに使用できますが,JavaScriptで以下のように処理を記述します.

  $(document).ready(function () {
    $('table').fixedTableHeader();
  });

動作イメージ

以下の画像を見ると,テーブルのヘッダ部分がスクロールしても表示され続けていることが確認できると思います.

ダウンロードしたファイル内にサンプルがありますので,実行して確認してみてください.

まとめ

テーブルを使用した表が縦に長くなってしまう場合には,ユーザにも優しく,導入の手間もそれほどかからないので,使用してはいかがでしょうか.