テーブルのヘッダーセルをスクロール固定できる「jQuery.floatThead」 WordPressでの使い方

通常のテーブル(表)はスクロールするとセル見出しが見えなくなります。

これだと、長いデータを見る上で少し不便です。というのも、スクロールしているうちに何のデータかわからなくなってしまうからです。

そこで今回は、そういった難点を解消できるjQuery.floatTheadというjQueryプラグインの紹介です。

以下のようなテーブルが手軽に作成できます。(スクロールしてみてください)

ヨミ 統率 武力▼ 知力 政治 誕生
呂布 奉先 リョフ 94 100 25 16 156
張飛 翼徳 チョウヒ 83 98 35 22 167
関羽 雲長 カンウ 93 97 77 64 162
馬超 孟起 バチョウ 91 97 46 44 176
許褚 仲康 キョチョ 66 96 39 23 170
趙雲 子龍 チョウウン 88 96 78 72 168
顔良   ガンリョウ 83 95 45 33 160
文醜   ブンシュウ 82 95 25 24 161
甘寧 興覇 カンネイ 87 94 78 13 163
龐徳 令明 ホウトク 75 94 72 48 171
華雄   カユウ 78 93 54 40 155
黄忠 漢升 コウチュウ 84 93 61 55 148
周泰 幼平 シュウタイ 81 93 48 33 170
典韋   テンイ 68 93 31 29 160
夏侯淵 妙才 カコウエン 91 92 51 64 163
夏侯惇 元譲 カコウトン 90 92 64 76 157
魏延 文長 ギエン 83 92 66 35 175
孫策 伯符 ソンサク 95 92 75 72 175
太史慈 子義 タイシジ 79 92 62 56 166

データ 三国志武将データ一覧

このプラグインを使うことによって、長い表でも見やすくできるかと思います。

スポンサーリンク
レクタングル(大)広告

jQuery.floatTheadとは

jQuery.floatThead

jQuery.floatTheadは、テーブル(表)のヘッダーセル(セル見出し)を固定表示してくれるjQueryプラグインです。

例えば普通にテーブルをスクロールすると、ヘッダーセルが以下のように隠れてしまいます。

セルの中身が何のデータかわからない

これだと途中で、どの数値がどんなデータだったか忘れてしまった場合は、スクロールバックして戻る必要があります。

これだと、ちょっと不便です。

ただ、今回のjQueryプラグインを使えば、スクロールをしても常に画面上部にヘッダーセルを固定表示できます。

スクロールしてもセル見出しが表示される

もちろん、テーブルの表示が終了すれば固定は解除されます。

以下では、そのWordpressでの使い方を紹介します。

jQuery.floatThead使用の主な手順

jQuery.floatTheadの設置はとても簡単で、以下の手順で行えます。

  1. jQuery.floatTheadのダウンロード&設置
  2. テーブル(表)を作成する
  3. フッターでjsファイルを読み込んで実行コードを書く

以下では、「セル見出しを固定する方法」について詳しい手順について説明します。

jQuery.floatTheadのダウンロード&設置

まずは、jQuery.floatTheadからファイルをダウンロードして解凍します。

jQuery.floatTheadのダウンロード

ダウンロードした、「mkoryak-floatThead-x.x.x-x-xxxxxxxx.zip」ファイルを解凍して中にある以下のファイルを

  • dist/jquery.floatThead.min.js

WordPressテーマ(子テーマ)内に以下のように設置します。

  • テーマフォルダ/js/jquery.floatThead.min.js

テーブル(表)を作成する

コンテンツとなるテーブルは、以下のように作成します。

ここで、注意しなければいけないのは「ヘッダーセル(th)」となる行(tr)を<thead></thead>で囲むことです。

「データセル(td)」となる行(tr)も、<tbody></tbody>で囲みます。

フッターでjsファイルを読み込んで実行コードを書く

最後に、フッターの、</body>タグ手前あたりに以下のように記入します。

親テーマをカスタマイズして利用するにはget_stylesheet_directory_uri()の代わりにget_template_directory_uri()を使用してください。

WordPressで、JavaScriptを呼び出すには、wp_enqueue_script()を使うべきかもしれませんが、説明がややこしくなるのでタグで直接呼び出す方法を書いています。

WordPressのメインカラムで表示されるテーブルすべてに適用させる場合は、以下のように書くと#main配下のテーブルすべてに適用されます。

※上記は、メインカラムに#mainを利用している場合の例です。

動作確認

で、実際の動作が以下のようになります。

ヨミ 統率 武力 知力▼ 政治 誕生
諸葛亮 孔明 ショカツリョウ 92 33 100 98 181
左慈   サジ 0 0 100 50 157
龐統 士元 ホウトウ 80 15 98 84 179
郭嘉 奉孝 カクカ 58 10 98 81 170
周瑜 公瑾 シュウユ 98 71 97 91 175
司馬懿 仲達 シバイ 97 62 97 94 179
賈詡 文和 カク 81 34 97 84 147
陸遜 伯言 リクソン 98 66 96 90 183
徐庶 元直 ジョショ 88 65 96 80 180
荀彧 文若 ジュンイク 51 11 96 99 163
法正 孝直 ホウセイ 81 48 95 75 176
田豊 元皓 デンポウ 58 39 95 90 162
李儒   リジュ 61 29 94 70 150
荀攸 公達 ジュンユウ 70 21 94 89 157
黄月英   コウゲツエイ 60 21 94 88 186
魯粛 子敬 ロシュク 90 57 93 93 172
沮授   ソジュ 79 31 93 92 156
姜維 伯約 キョウイ 85 89 92 66 206
鄧艾 士載 トウガイ 91 88 92 76 197

今回は、サンプルとして最も簡単な実装方法を紹介しました。

配布元には、様々なオプションを利用して、いろいろな表示制御方法も掲載されています。詳しくは以下のページを参照してください。

参考 jQuery.floatThead

まとめ

というわけで、jQuery.floatTheadの使い方の紹介でした。

長いテーブルを記事などに掲載する際は、読み手に少し優しい表示になるかと思います。

ただ、利用するには、thead、tbodyタグをしっかりとマークアップする必要があるので、そこらへんは少し面倒なところかもしれません。

サイト jQuery.floatThead