【jQuery】テーブルの見出しがスクロールに付いてくる方法
【jQuery】テーブルの見出しがスクロールに付いてくる「jquery.stickyheader.js」
テーブルで大量のデータを見せたい時におすすめなjQueryプラグイン「Sticky Table Headers」をご紹介します。縦や横に長いテーブルでも、スクロールで追随して表示されるので、常に項目と値を対比させながら見せることができる便利なプラグインです。
１.ダウンロード
「DOWNLOAD SOURCE」からソース一式をダウンロードします。
サンプルとして、スクロールで行見出しが追随するもの、行見出しと列見出し両方が追随するものが入っています。
２.実装
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は３ファイルが格納されていますが、必要なのはcomponent.cssのみです。
head内で読み込みます。
◆HTML
<link rel="stylesheet" type="text/css" href="css/component.css" />