この記事がよく読まれてます

TwitterBootstrapでも採用されている、たぶんもっとも簡単なレスポンシブ対応テーブルの作り方
この記事は執筆から1年以上経過しており、情報が古い可能性があります。
レスポンシブ対応Webサイト制作で困ることが多いのがテーブル作成。
解決するための手法はたくさんありますが、
この記事では、そのなかでも、比較的かんたんな実装方法を紹介します。
この記事の目次
レスポンシブWebサイトでの、テーブル組みコーディングにはいろんな手法があります
下記、Design Spiceさんのブログでは、かっこよくて、ユーザービリティも良好なテーブル組みの方法が掲載されています。
レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice
うん、すばらしい!
これでよくね?
当記事ではもう少し単純な方法を紹介します。
当記事では、上記の手法よりも、見た目は劣るけれど、もっと簡単に実装できる方法を紹介します。
具体的には
具体的に説明すると、テーブル自体は、PCとスマホでスタイルを変えることはせず、小さい画面の場合に、あふれてしまった分のテーブルを横スクロールさせることで、表示させるというものです。
地味でユーザービリティも少し劣るかもしれませんが、とにかく簡単に組める。
これがこの手法の最大のメリットです。
ミソは、テーブルをoverflow-x: auto;にしたdivで囲うこと
では、早速コードを紹介します。
<div id="wrapper"> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>あ</td> <td>い</td> <td>う</td> </tr> </table> </div>
//CSS 重要な箇所を抽出 #wrapper{ width: 100%; overflow-x: auto; } table{ width: 600px;//ここは適当な大きさで }
table全体をdivで囲っているのがわかります。
さらに、このdivにスタイルをつけていきます。
具体的には、
overflow:auto;
と
width:100%
あとは、レイアウトに応じてメディアクエリを用いて、画面サイズが小さくなった時だけ、動作するように、といった調整をすれば、もう完成。
まとめ
デザインに特別な指定やこだわりがないときは、この手法でサクッと実装しちゃうといいかなと思います。
おわりに
この記事はあなたのお役にたてましたか?
もしよろしければ・・・
この記事をみんなに教える?
筆者に何か教える?
たとえば、
小棹制作所はこんなこと↓を知りたがっているようです。
- 「【質問です】あなたがWordPressでサイトを構築するときに絶対ハズせないおすすめプラグインは?」
- 「【質問です】tumblr、好き?」
- 「【質問です】あなたがWebサイト制作で使っているお気に入り写真素材集サイトは?」
feedlyでブログを購読する?
筆者にメーッセージを送る?
なんでもご自由に書いて送ってください。
ご質問等返信を希望の場合は、メールアドレス等返信先の記載をお忘れなく。

