tableタグを使って表を作ったけど、横のセル数が多くて、レスポンシブ対応ができず、スマートフォン対応ができない時の対策について
こんにちは。コワーキングスペース7Fの星野邦敏です。
tableタグを使って表を作ったけど、横のセル数が多くて（tdタグが多い表で）、WebサイトがレスポンシブWebデザインで作っていてスマートフォン対応をしていても、スマートフォンで見ると、表が横にはみ出してしまう場合があるかと思います。
そのような時の解決方法として、２つの実装方法をご紹介します。
（１）Responsive Tables用のCSSとJavaScriptを入れる。
HTML・CSS・JavaScriptなどのみで静的ページとして作られているサイトの場合は、この方法が一番シンプルで動きも良いかなと思います。
色々とありますが、英語サイトですが、以下が参考になるかと思います。
Crafty Responsive Tables | Playground from ZURB
具体的には、
Crafty Responsive Tables | Playground from ZURB
よりコードをダウンロードした上で、cssとjsを反映させます。
<link type="text/css" media="screen" rel="stylesheet" href="responsive-tables.css" /> <script type="text/javascript" src="responsive-tables.js"></script>
その上で、レスポンシブ対応のテーブルを作る場合には、
<table class="responsive"> <tr> …
と書きます。
デモサイトもありますので、こちらで動きは確認できます。
（ブラウザの横幅を縮めるとレスポンシブでの動きが分かりやすいかなと。）
（２）WordPressを使っている場合、「TablePress」プラグインを使った上で、「Responsive Tables Extension」プラグインもインストールして有効化する。
WordPressを使ってWebサイトを作っている場合には、これが最もシンプルで工数が掛からないと思います。
WordPressには、「TablePress」プラグインという、まず表を作った上で、ショートコードで本文に埋め込んで表にするプラグインがあります。
WordPress › TablePress « WordPress Plugins
その上で、
Responsive Tables | TablePress
から、「Responsive Tables Extension」プラグインをダウンロード、１つのプラグインとしてインストール＆有効化します。
通常の「TablePress」プラグインは
[table id=1 /]
というようなショートコードを書きますが、
これを、英語のサイトではありますが、
Responsive Tables | TablePress
に書かれている通りで、
[table id=1 responsive="phone" /]
や
[table id=1 responsive="tablet" /]
とすることで、レスポンシブ対応が可能となります。
デモサイトとしては、
Responsive Tables | TablePress
にある２つの表で分かるかなと思います。
（ブラウザの横幅を縮めるとレスポンシブでの動きが分かりやすいかなと。）
以上となります。
「車輪の再発明」という言葉があるように、最近はライブラリやプラグインがあり、ゼロから自分で作る必要もありませんし、便利になったと同時に、まずはそういうものがあるということを知っているか知らないかで、工数がだいぶ変わるなと感じています。
もちろん、勉強としてゼロから作るのは良いかと思いますが、GitHubなどで公開されて多くの人で改良されて良いとされているモノを超えるのは中々大変ですし、時間は有限の中、それがベストな選択肢とも思えませんので、ライブラリやプラグインは便利だと思いました。
