【jquery.floathead】テーブルのヘッダーを固定してスクロールできるようにする方法

2018/03/23更新 カテゴリー:コラム,開発奮闘記 タグ: ,
  • このエントリーをはてなブックマークに追加

tableで行数が多いと下の方に行った時にヘッダー(見出し)が見えなくなります。そうすると、また上に戻ってヘッダーを確認しなければならず不便きわまりありません。

今回はそんな時に、ヘッダーを固定してくれるjQueryライブラリ「jquery.floathead」をご紹介します。

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

jquery.floathead

フリーランスエンジニアの稼ぎ方

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

PROFILE

プロフィール

入江 慎吾
自分が作ったサービスで生きていく。同じゴールを目指すサービス開発集団「入江開発室」を運営(現在約280名) / 個人間スキルシェアサービス「MENTA」は約1ヶ月で売上100万円を達成。1日で100社が利用した「JobTag」など多数開発
(詳しいプロフィール)

PRODUCT

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

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす