tableのresponsive化

日本人はどういうわけだか表が好きだ。
WEBページでも使いたがる。
ところがこの表はレシポンシブには向かない。
要するに狭い画面では表がうまく表示できないからだ。
しかし、そうは言ってもそういう要求はあるのだからやってみるしかない。
いろいろと調べたのでその報告。

まずはワードプレス上での表のレスポンシブ化について

以前紹介したtablepressのレスポンシブ化をしてみる。
tablepressの実装については以前の記事
http://kwski.net/wordpress/1094/を参考にしている。

まず「TablePress Responsive Tables」というのがあるので、

これをダウンロード（https://tablepress.org/extensions/responsive-tables/からできます。）し、プラグインの新規追加から「プラグインのアップロード」を選び、ダウンロードしたzipファイルを選択し、アップロードし、有効化する。

あとはTablePressのShortcode:(ショートコード)に以下のようにresponsive=”xxx”を付与して投稿に貼り付ける。
例えば

のように。

以前の表をやってみた。

// 768px以下になるとテーブルを横向きにする場合

商品番号	商品名		税込卸価	詳細	購入
01K201	家庭用カビ取り剤サール	１Ｌ	¥1,296	詳細	購入
02KS01	業務用除カビ洗浄剤S1	１Ｌ	¥1,512	詳細	購入
04KS05	業務用除カビ洗浄剤S5	５Ｌ	¥6,480	詳細	購入
05K116	業務用除カビ洗浄剤S6	１６Ｌ	¥20,304	詳細	購入
06KJ31	頑固なカビ取り剤JＪ3本ｾｯﾄ	１００ｇ	¥1,944	詳細	購入
07KJ50	頑固なカビ取り剤J	５００ｇ	¥2,052	詳細	購入

// 980px以下になるとテーブルを横向きにする場合

商品番号	商品名		税込卸価	詳細	購入
01K201	家庭用カビ取り剤サール	１Ｌ	¥1,296	詳細	購入
02KS01	業務用除カビ洗浄剤S1	１Ｌ	¥1,512	詳細	購入
04KS05	業務用除カビ洗浄剤S5	５Ｌ	¥6,480	詳細	購入
05K116	業務用除カビ洗浄剤S6	１６Ｌ	¥20,304	詳細	購入
06KJ31	頑固なカビ取り剤JＪ3本ｾｯﾄ	１００ｇ	¥1,944	詳細	購入
07KJ50	頑固なカビ取り剤J	５００ｇ	¥2,052	詳細	購入

// 1200px以下になるとテーブルを横向きにする場合

商品番号	商品名		税込卸価	詳細	購入
01K201	家庭用カビ取り剤サール	１Ｌ	¥1,296	詳細	購入
02KS01	業務用除カビ洗浄剤S1	１Ｌ	¥1,512	詳細	購入
04KS05	業務用除カビ洗浄剤S5	５Ｌ	¥6,480	詳細	購入
05K116	業務用除カビ洗浄剤S6	１６Ｌ	¥20,304	詳細	購入
06KJ31	頑固なカビ取り剤JＪ3本ｾｯﾄ	１００ｇ	¥1,944	詳細	購入
07KJ50	頑固なカビ取り剤J	５００ｇ	¥2,052	詳細	購入

tablepress 以外のtableのレスポンシブ化については別項で