日本人はどういうわけだか表が好きだ。
WEBページでも使いたがる。
ところがこの表はレシポンシブには向かない。
要するに狭い画面では表がうまく表示できないからだ。
しかし、そうは言ってもそういう要求はあるのだからやってみるしかない。
いろいろと調べたのでその報告。
まずはワードプレス上での表のレスポンシブ化について
以前紹介したtablepressのレスポンシブ化をしてみる。
tablepressの実装については以前の記事
http://kwski.net/wordpress/1094/を参考にしている。
まず「TablePress Responsive Tables」というのがあるので、
これをダウンロード(https://tablepress.org/extensions/responsive-tables/からできます。)し、プラグインの新規追加から「プラグインのアップロード」を選び、ダウンロードしたzipファイルを選択し、アップロードし、有効化する。
あとはTablePressのShortcode:(ショートコード)に以下のようにresponsive=”xxx”を付与して投稿に貼り付ける。
例えば
のように。
以前の表をやってみた。
// 768px以下になるとテーブルを横向きにする場合
// 980px以下になるとテーブルを横向きにする場合
// 1200px以下になるとテーブルを横向きにする場合
tablepress 以外のtableのレスポンシブ化については別項で