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

2018/03/23更新 カテゴリー:コラム,開発奮闘記 タグ: ,
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

PRODUCT

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

PROFILE

プロフィール

入江 慎吾/イリテク代表
「死ぬ気でやれよ、死なないから」をモットーに体当たりでWEBサービスをつくってます🔥 収入もないのに受託開発をやめて好きなサービスだけをつくることに決めました。資金がつきるか、ヒットするのが先か...見守ってください。 (詳しいプロフィール)
WEBサービス・アプリ開発に役立つ情報をイリテクの入江がお届けします。プログラミング、UI/UXデザイン、SNS・ブログマーケティングなど、プロダクト開発だけで自由に生きていくための実践的な情報を配信しています。

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす