サイト上に料金の比較表などテーブルを表示させたい、という需要は限りなく多くありますよね。この「表」ってのは簡単そうに見えてなかなか厄介なしろものでございます。イマドキはモバイルファーストの時代。レスポンシブウェブデザインが必須、これに相性が良くないのが表/テーブル、といっても過言ではありません。投稿や固定ページで表を作成する際にtableタグをいちいち入力しなくても簡単に作成できる便利なプラグイン、TablePressにレスポンシブデザインに対応する方法についての記事です。簡単に作成できる、と言ってもhtmlタグを駆使して作成するよりも、というレベルの話です。TablePressとて、高機能であるがゆえにある程度の使い方をマスターしてからでないとなかなか使いこなすのは難しいかもしれないでしょう。単純に表をサイトに実装したいだけなら、最も簡単なのはエクセルのデータをhtmlに変換してくれるWEBツールなんかを使えば済むことなんですね。しかし、それではレスポンシブに対応するのにまた骨が折れちゃうってことで、多少面倒でもWordpressサイトに表を作成するにあたりこのTablePressの使い方をマスターしておき、更に下記の方法でレスポンシブに対応する方が良いでしょう。

大元のTablePressインストールと設定について

WPnaviさんの記事の方が分かりやすく解説されているのでこちらを参照してください(面倒なので逃げw)。

TablePressのレスポンシブ対応は？

さて、肝心のレスポンシブ対応なんですが、これについては別にアドオン(機能を追加するプラグインのプラグイン)が必要です。
Responsive Table　ダウンロードします
ダウンロードしたzipファイルを、Wordpressの「プラグイン追加」からアップロードします。

4つのレスポンシブモードがある

• flip：このモードでは、拡張機能はテーブルを横に反転し（行は列として表示され、逆も同様）、水平にスクロール可能にすることで、テーブルのレイアウトを変更します。このモードは、プレーンなデータ/テキストテーブルには適したソリューションですが、通常、画像を含むテーブルではうまく機能しません。
• scroll：このモードでは、幅が広すぎて水平方向に完全に表示できないテーブルが作成されます。これにより、ユーザーはすべてのテーブルデータにアクセスできます。これは、画像が自動的にサイズ変更されない場合、通常、画像を含むテーブルに適したアプローチです。
• collapse：このcollapse方法では、表に非表示/展開効果を追加できます。それ以外の場合は切り捨てられる列からデータを非表示にし、代わりに各エントリの下に挿入される折りたたみ可能な行にそのデータを追加します。その行は、「+」および「-」ボタンで表示および非表示にできます。このモードは、ディレクトリテーブルなど、一部の「メイン」列の追加情報を表示するテーブルで特に役立ちます。
• stack：このstackモードでは、行のセルが隣同士ではなく、互いの上に表示されます。これにより、列が1つしかないように見えるため、テーブルがより狭くなります。ただし、テーブルヘッド行の列ヘッダーセルは表示されないため、この方法は、ディレクトリテーブルなどの情報が簡単に認識できるテキストデータに最適です。

Responsive Tableの使い方

TablePressのショートコードに、レスポンシブのモードとブレークポイントのオプションを追加指定するだけです。

ブレークポイントのオプション

• phone：携帯電話（画面幅が768ピクセルより小さいデバイス）のみレスポンシブが有効になります。
• tablet：携帯電話とタブレット（画面幅が980ピクセル未満のデバイス）のみレスポンシブが有効になります。
• desktop：携帯電話、タブレット、およびデスクトップモニター（画面幅が1200ピクセル未満のデバイス）でのみレスポンシブが有効になります。
• all：画面サイズに関係なく、すべての画面でレスポンシブが有効になります。


table id = hoge responsive = flip responsive_breakpoint = phone /


responsive = ここにflip　scroll　collapse　stack　いずれかのモードを指定
responsive_breakpoint =　ここにphone　tablet　desktop　all　いずれかのブレークポイントのオプションを指定

TablePressのショートコードに上記を追記することで実装することができます。