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

2016/12/21 (2018/02/16更新) カテゴリー:エンジニアコラム,開発奮闘記 タグ: ,
SPONSOR
  • このエントリーをはてなブックマークに追加

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
IRITECはITエンジニアが「コンテンツで集客・広告収入を得る」「お客様の話をきいて価値を提案できる」 「自分で考えたアプリで収益を上げる」など、エンジニアが生き残っていくための情報をお届けしているビジネスハックメディアです。

COMMENT

コメントをどうぞ

RELATION

関連する記事

SPONSOR

RECOMMEND

おすすめの記事

SPONSOR

TAG

タグから記事をさがす

PROFILE

イリテクのプロフィール

イリテクはWEBシステム・スマホアプリ開発を得意とする制作会社です!
入江 慎吾/イリテク株式会社 代表取締役
1982年生まれ。長崎県 五島列島出身。福岡のWeb制作会社で10年間、ディレクション、Webデザイン、システム開発に従事。 その後、趣味で始めたiPhoneアプリ開発をきっかけにフリーランスとして独立後、2014年にイリテク株式会社として法人化。(もっと詳しいプロフィール)
SPONSOR

PRODUCT

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