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

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

jQuery.floatTheadを使う

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

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

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

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

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

この記事もおすすめ

記事を書いている中の人

この記事をシェアする

• Tweet
• 

メールマガジンで新着記事をフォロー

• 
  RSSで最新記事を読む
• Follow @iritec_jp
  Twitterでフォロー
• facebookでフォロー

イリテクで開発したプロダクト

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