WordPressでテーブルのレスポンシブ化を「Basic Table」jQueryプラグインを用いて実装する方法

レスポンシブデザインのサイトで、表(Table)の扱いは頭を悩ませるところです。

今回は、そういったテーブルをjQueryプラグイン「Basic Table」を用いて比較的手軽にレスポンシブ化する方法の紹介です。

この記事では、以下のような通常のテーブルを

通常のテーブル表示

以下のような表示にするWordpressのカスタマイズ方法を紹介します。

テーブルのレスポンシブ表示

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

Basic Tableとは

Basic Table (jQuery Responsive Tables)

Basic Tableは、見出しセルを複製しデータ並び替えることで、狭い画面でも見やすくテーブルを表示してくれる、jQueryプラグインです。

デモページの表で説明すると、以下のようなテーブルを

通常のベーシックテーブル

以下のように表示させることができます。

レスポンシブ表示のベーシックテーブル

jQueryでオプションを指定することで、レスポンシブ表示するブレークポイントを指定したり、テーブルが長くなりすぎることを防ぐため、レスポンシブ後のテーブルの高さなどを制限したりすることができます。

Basic Tableの使い方

Basic TableをWordpressで利用するには、主に以下の手順が必要です。

  1. Basic Tableのダウンロード&設置
  2. CSSファイルの呼び出し
  3. スクリプトの呼び出し
  4. レスポンシブテーブルのスタイルを設定

複雑な、jQueryコードなどは書く必要がないので、自前でコードを書くよりは簡単に設置できるかと思います。

Basic Tableのダウンロード&設置

まずは、jerrylow/basictableから、zipファイルをダウンロードします。

jerrylow-basictable · GitHub

ダウンロードが完了したら、zipファイルを解凍し、中にある以下のファイルを使用します。

  1. basictable.css
  2. jquery.basictable.min.js

今回の例では、これらのファイルを以下のように設置しました。

  1. 子テーマフォルダ/css/basictable.css
  2. 子テーマフォルダ/js/jquery.basictable.min.js

CSSファイルの呼び出し

次に、<head></head>内でCSSファイルを呼び出します。

呼び出すコードは、以下のようになります。

コメントアウトしてあるところは、親テーマで利用する場合のコードです。環境に合わせて利用し、不要なら削除してください。

スクリプトの呼び出し

次に、フッターの</body>手前に、以下のように書き込みます。

こちらでは、Basic Tableのスクリプトファイルを呼び出し、テーブルをレスポンシブ化する実行コードを書きます。コメントアウトしてある部分は、環境に合わせて利用もしくは削除してください。

簡単に説明しておくと、以下の部分でJavaScriptファイルを読み込んでいます。

で、以下の部分が実行コードです。今回の例では、IDが"table"のテーブルをレスポンシブ化するように設定しています。

ページが読み込まれた時点で、テーブルのレスポンシブ化を実行します。

レスポンシブテーブルのスタイルを設定

最後に、レスポンシブ化されたテーブル用のスタイルをstyle.cssあたりに以下のように設定します。

Basic Tableでは、複製されたヘッダーセルには、通常の<th>のスタイルなどは適用されないので、自前で設定する必要があります。

上記は、当サイトのテーブルスタイルに合わせた表示にしてあります。これらのスタイルは、それぞれのサイトのテーブルスタイルに合わせる必要があります。

動作確認

Basic Tableを利用するには、IDが"table"のテーブルを以下のように書く必要があります。

ここで注意しなくてはいけないのは、先頭行のみにヘッダーセル(th)を使い、その見出しとなる行を<thead></thead>で囲みます。

<thead>で、先頭の見出し行を囲まないとレスポンシブ表示させたときに、消えるべき通常テーブルの見出しが表示されたままになってしまいます。

あと、見出し行以外に<th>を利用すると、表示が崩れてしまうので注意が必要です。

実際のレスポンシブテーブル

で、実際のテーブルが以下です。

姓名統率武勇知略政治総合
武田信玄110829694382
織田信長100899497380
徳川家康968794100377
太田道灌99889990376
北条氏康967994107376
北条早雲976998105369
伊達政宗96869293367
毛利元就936910598365
真田昌幸97769891362
明智光秀88859296361
今川氏親89799597360
斎藤道三857910095359
佐竹義重94868889357
羽柴秀吉877393104357
長宗我部元親93869384356
上杉謙信1201056662353

データ:信長の野望 天道 武将データ

モバイル端末(568ピクセル以下)などで表示させると、レスポンシブ表示されると思います。

オプションなど

Basic Tableのオプションとして、以下のようにブレークポイントを設定したりできます。(デフォルトは568px)

以下のように書くことで、長くなりがちなレスポンシブテーブルの高さを制限するなんて使い方もできます。

オプションについて詳しくは以下を参照してください。

まとめ

Basic Tableを使うと、見出しセルを複製するタイプのレスポンシブテーブルを比較的手軽に作ることができます。

また、オプションを指定することで、レスポンシブ化すると長くなりがちなテーブル表示の高さも制限することができ、表示も多少カスタマイズすることができます。

モバイルユーザーが多いサイトで、画面幅も狭い端末でも、テーブルを綺麗に表示させたい場合には、なかなか良さそうです。

『WordPressでテーブルのレスポンシブ化を「Basic Table」jQueryプラグインを用いて実装する方法』へのコメント

  1. わいひら 名前:わいひら 投稿日:2016/06/24(金) 05:46:04 ID:742957fc9

    関連トピック。
    「Basic Table」の設定方法がわからない。