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

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

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

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

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

Basic Tableとは

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

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

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

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

Basic Tableの使い方

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

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

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

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

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

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

basictable.css
jquery.basictable.min.js

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

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

CSSファイルの呼び出し

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

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

<!-- 子テーマで呼び出すとき -->
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/basictable.css" />
<!-- 親テーマで呼び出すとき -->
<!-- <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/basictable.css" /> -->

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

スクリプトの呼び出し

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

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.basictable.min.js"></script>
<!-- 親テーマで呼び出すとき -->
<!-- <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.basictable.min.js"></script> -->

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('#table').basictable();
});
</script>

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

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

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.basictable.min.js"></script>

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

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('#table').basictable();
});
</script>

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

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

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

/*レスポンシブテーブルの行*/
table.bt tbody tr{
  border: 1px solid #ccc;
}
/*レスポンシブテーブルの見出しとなるヘッダーセルとなる部分*/
table.bt tbody td::before{
  background-color: #eee;
  margin-right: 10px;
  padding: 2px 10px;
}
/*レスポンシブテーブルの行となる部分*/
table.bt tbody td{
  padding: 0;
}
/*レスポンシブテーブルのデータセルとなる部分*/
table.bt tbody td .bt-content{
  padding-right: 10px;
}

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

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

動作確認

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

<table id="table">
<thead>
     <tr>
          <th>姓名</th>
          <th>統率</th>
          <th>武勇</th>
          <th>知略</th>
          <th>政治</th>
          <th>総合</th>
     </tr>
</thead>
<tbody>
     <tr>
          <td>武田信玄</td>
          <td>110</td>
          <td>82</td>
          <td>96</td>
          <td>94</td>
          <td>382</td>
     </tr>
     <tr>
          <td>織田信長</td>
          <td>100</td>
          <td>89</td>
          <td>94</td>
          <td>97</td>
          <td>380</td>
     </tr>
     <!-- 省略 -->
</tbody>
</table>

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

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

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

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

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

姓名	統率	武勇	知略	政治	総合
武田信玄	110	82	96	94	382
織田信長	100	89	94	97	380
徳川家康	96	87	94	100	377
太田道灌	99	88	99	90	376
北条氏康	96	79	94	107	376
北条早雲	97	69	98	105	369
伊達政宗	96	86	92	93	367
毛利元就	93	69	105	98	365
真田昌幸	97	76	98	91	362
明智光秀	88	85	92	96	361
今川氏親	89	79	95	97	360
斎藤道三	85	79	100	95	359
佐竹義重	94	86	88	89	357
羽柴秀吉	87	73	93	104	357
長宗我部元親	93	86	93	84	356
上杉謙信	120	105	66	62	353

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

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

オプションなど

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

jQuery('#table-breakpoint').basictable({
    breakpoint: 768,
});

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

jQuery('#table-max-height').basictable({
    tableWrapper: true
});

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

Basic Table (jQuery or Vanilla JS Responsive Tables)

www.jerrylow.com

まとめ

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

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

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