シェアオフィス6F
貸会議室6F

こんにちは。コワーキングスペース7Fの星野邦敏です。

tableタグを使って表を作ったけど、横のセル数が多くて(tdタグが多い表で)、WebサイトがレスポンシブWebデザインで作っていてスマートフォン対応をしていても、スマートフォンで見ると、表が横にはみ出してしまう場合があるかと思います。

そのような時の解決方法として、2つの実装方法をご紹介します。

 
(1)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> …

と書きます。

デモサイトもありますので、こちらで動きは確認できます。
(ブラウザの横幅を縮めるとレスポンシブでの動きが分かりやすいかなと。)

 
(2)WordPressを使っている場合、「TablePress」プラグインを使った上で、「Responsive Tables Extension」プラグインもインストールして有効化する。
WordPressを使ってWebサイトを作っている場合には、これが最もシンプルで工数が掛からないと思います。
WordPressには、「TablePress」プラグインという、まず表を作った上で、ショートコードで本文に埋め込んで表にするプラグインがあります。
WordPress › TablePress « WordPress Plugins

その上で、
Responsive Tables | TablePress
から、「Responsive Tables Extension」プラグインをダウンロード、1つのプラグインとしてインストール&有効化します。

通常の「TablePress」プラグインは

[table id=1 /]

というようなショートコードを書きますが、
これを、英語のサイトではありますが、
Responsive Tables | TablePress
に書かれている通りで、

[table id=1 responsive="phone" /]

[table id=1 responsive="tablet" /]

とすることで、レスポンシブ対応が可能となります。

デモサイトとしては、
Responsive Tables | TablePress
にある2つの表で分かるかなと思います。
(ブラウザの横幅を縮めるとレスポンシブでの動きが分かりやすいかなと。)

 
以上となります。
「車輪の再発明」という言葉があるように、最近はライブラリやプラグインがあり、ゼロから自分で作る必要もありませんし、便利になったと同時に、まずはそういうものがあるということを知っているか知らないかで、工数がだいぶ変わるなと感じています。
もちろん、勉強としてゼロから作るのは良いかと思いますが、GitHubなどで公開されて多くの人で改良されて良いとされているモノを超えるのは中々大変ですし、時間は有限の中、それがベストな選択肢とも思えませんので、ライブラリやプラグインは便利だと思いました。

スポンサーリンク

スポンサーリンク

この記事を書いた人

コワーキングスペース7Fの運営代表者です。7Fの運営会社である株式会社コミュニティコムの代表取締役でもあります。2012年12月1日に7Fがオープンしてから2014年4月末まで店長も兼ねていましたので、外出予定が無い日は基本毎日いましたが、現在は山下に店長を任せ、オーナー兼利用者となりました。今はもともとの本業のITの仕事と、コワーキングスペースに絡んだ創業支援や地域おこしの仕事が中心です。下のフロアを増床することになり、シェアオフィス6Fと貸会議室6Fの運営もしています。趣味は自分の思い付いたWebサービスを自分で自由に開発することです。



メールマガジン登録

週1回程度でメールマガジンにて、コワーキングスペース7Fのイベントや勉強会情報や近況、Web関係や地域情報などを配信しています。
もし良ければ以下のフォームにメールアドレスを入力して登録してくださいね!

7F情報をぜひフォローください!


スポンサーリンク

月額会員募集中の申し込みフォーム
イベント情報
会議室ご予約
オープンスペースご予約
無料見学ご予約
お問い合わせ
メールマガジン登録フォーム
フロアマップ
よくある質問
Amazonコワーキングスペース7Fのほしい物リスト
一時託児施設利用
7F大学
リブライズ
Eightどこでもスキャン計画
7Fスタッフ募集のお知らせ
シェアオフィス6F
貸会議室6F

混雑状況やイベント情報

サイト内検索