TumblrレスポンシブWebデザインで狭いスクリーンサイズの時にテーブルをどう見せるかは悩ましい問題のひとつです。その対応方法を幾つか調べてみました。1DEMOtableやtr、tdなどのテーブル関連のタグのdisplayプロパティを変更することでデザインを変更します。tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。none;}.....}Chrome、Safari、Firefox対応。IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。条件分岐コメントを使ってIEにはメディアクエリを読ませないようにしておきます。2DEMO上記とは逆のアプローチです。dlで作成した定義リストをdisplayプロパティ値をテーブル関連の値にすることで、テーブルの表示にします。#ccc;}.....}Chrome、Safari、Firefox、IE9対応。IE8以下はdisplay:table-cell等をサポートしてないので、定義リストのまま表示されることになります。inline-blockとoverflow-xを使うDEMOセルの部分を横スクロールで見ることができます。方法はまずtheadをfloat:leftで左に持ってきます。tbodyにoverflow-x:auto、white-space:nowrapを指定して、中のコンテンツであるtrをdisplay:inline-blockにします。することでウインドウサイズ以上にコンテンツを横に並べ、はみ出した分スクロールバーが表示されます。Chrome、Safari、Firefox対応。Bushelldisplay:boxを使うDEMO上記と考え方は同じですが、display:-webkit-boxを使うともっと少ないコードで簡潔に書くことができます。※この方法ではFirefoxで崩れてしまうのでdisplay:-moz-boxは書いてませんChrome、Safariのみ対応。Bushellタップでテーブルのみを表示するDEMO小さいウインドウサイズではセル内のデータを非表示にして、タッチボタンを表示します。ボタンをクリックするとjQueryを使ってhtmlにclassを追加します。擬似的にテーブルのみを別画面で表示させたようになります。Chrome、Safari、Firefox対応。class="XXXX">に置き換えます。大きいスクリーンサイズではdisplay:table-cellなどテーブル関連のスタイルを使い見た目をテーブルのデザインにします。Chrome、Safari、Firefox、IE9対応。MobifreaksMediaTableを使うDEMOjQueryのプラグインMediaTableを使います。テーブルの上にコントローラーが表示され、チェックをつけたり外したりすることでセルの表示非表示を切り替えが出来ます。GitHubよりファイル一式をダウンロードします。適切な場所にファイルを保存してjquery.mediaTable.cssとjquery.mediaTable.jsを読み込みます。メディアクエリに対応していないと大きいウインドウサイズの時に全部の情報が表示されないのでIE8以下にはrespond.jsを読み込みます。jQueryもCDNから読み込みます。src="js/respond.min.js"></script><![endif]-->media-tableを適応させたいテーブルにmediaTableを実行させます。$(function(){$('.mediaTable').mediaTable();});tdのclassでpersistを指定すると常に表示され、非表示にはできません。essentialを指定すると常に表示され、表示非表示選択ができます。optionalは768px以下で非表示、何も指定しないと1024px以下で非表示となり、いずれも表示非表示が選択できます。Chrome、Safari、Firefox、IE7以上対応です。Tablesを使うDEMOjQueryのプラグインresponsive-table.jsを使います。動作は「inline-blockとoverflow-xで対応」に近いです。CSS/JSよりファイルをダウンロードして、JavaScriptとCSSを読み込むだけなので設置は簡単です。IE8以下にこのJavaScriptを読みこませると表示が崩れるので条件分岐コメント使ってIE8以下には適用させないようにしました。Chrome、Safari、Firefox、IE9対応。src="js/responsive-tables.js"></script><!--<![endif]-->終わりに上記すべての方法はWebKitでは対応してますがIE9では一部の方法でしか対応できません。今のところはWindowsPhoneの数が少ないとは言え今後を考えると完全に無視はできないところです。CSS-Tricksではその他に、Canvasを使った方法や、セルを項目によって色分けする方法なども紹介されてます。あらゆるケースに対応できるベストと言える方法はまだありませんが、こういった手法を取り入れて対応できるところは積極的に活用して、それ以外のケースは工夫を重ねていこうと思います。レスポンシブなTableの対応方法満載のHPを発見。テーブルをレスポンシブ対応にしてくれるプラグイン。Spiceさんが、詳しく使い方をまとめてくださっています。AMとのさまこんにちは。いつも有益な情報の発信、ありがとうございます。“display”プロパティの誤植かと思います。PMhiro>とのさまご指摘ありがとうございます!修正しておきました。っこよくて、ユーザービリティも良好なテーブル組みの方法が掲載されています。PMキムチこんばんは。レスポンシブWEBデザインで、テーブルの処理の参考にさせていただいており、大変ありがたく思っています。1」の“[品詞]形容詞”のところで、“形容詞”のところを開業することは可能でしょうか?難しい印象がありますが、どうぞよろしくお願いします。PMhiro>キムチさん記事を読んでいただきありがとうございます。擬似要素にdisplay:blockを指定することで改行してるようにできると思います。}こちらで試してみてください。td部分をスクロールしたり、表組部分を別表示にしたりと色んな方法があります。以下の記事がとても参考になります。PMMICKこんにちは。いつも参考にさせていただいております。ひとつ解決できない問題がありまして、よろしければご指導いただきたいと思いまして・・・。内の文字列(DEMO内の「yes」や「no」)を改行してしまうと、theadが左に来た際に、ズレが生じてしまいます。これを解決する方法はありませんでしょうか?以上、何卒よろしくお願いいたします。PMhiroMICKさんこのケースの対応としては下記のような方法が考えられます。・br{dispaly:none;}として改行を無くす・改行されることが決定であればnth-child(n)セレクタを使い高さを指定する・jsで高さを取得して指定するMICKさんの状況にふさわしい方法かは分かりませんが参考にしていただければと思います。いくつかの実装パターンは「レスポンシブWebデザインでテーブルを使う時の小技」という人気記事で紹介されています。レスポンシブWebデザインでテーブルを使う時の小技レスポンシブWebデザインで狭いスクリーンサイズの時にテーブルをどう見せるかは悩ましい問題のひとつです。その対応方法を幾つか調べてみました。Spiceサービス作りましたAbout自分で得た情報、学んだことのアウトプットのために始めたblogです。して情報を共有することで少しでもWEB業界に貢献できたらなと思ってます。このblogが誰かの役に立てたら幸いです。内容で間違いなどありましたら指摘頂けると助かります。AuthortooltipHiro東京在住のフリーランスwebデザイナー。TSUKURIBEと言う屋号で活動してます。お問い合せは右のフォームまたはTSUKURIBEのサイトよりお願いします。Formフォームまたはこちらよりお問い合わせください。