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以下になるとテーブルを横向きにする場合


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

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

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

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です