catch

レスポンシブWebデザインでテーブルを使う時の小技

レスポンシブWebデザインで狭いスクリーンサイズの時にテーブルをどう見せるかは悩ましい問題のひとつです。その対応方法を幾つか調べてみました。

  1. displayプロパティの値を変更する 1
  2. displayプロパティの値を変更する 2
  3. inline-blockとoverflow-xを使う
  4. display:boxを使う
  5. タップでテーブルのみを表示する
  6. jQueryでタグを書き換える
  7. MediaTableを使う
  8. Responsive Tablesを使う

displayプロパティの値を変更する 1

displayプロパティを使う

tableやtr、tdなどのテーブル関連のタグのdisplayプロパティを変更することでデザインを変更します。
tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。

	@media only screen and (max-width:420px){
		tbody tr{
			display: block;
			margin-bottom: 1.5em;
		}
		tbody th,
		tbody td{
			display: list-item;
			border: none;
		}
		.....
	}
	

Chrome、Safari、Firefox対応。
IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。
条件分岐コメントを使ってIEにはメディアクエリを読ませないようにしておきます。

	<!--[if !IE]><!-->
		<style>
			@media only screen and (max-width:420px){
				.....
			}
		</style>
	<!--<![endif]-->
	

参考サイト:Responsive Data Tables | CSS-Tricks

displayプロパティの値を変更する 2

displayプロパティを使う

上記とは逆のアプローチです。
dlで作成した定義リストをdisplayプロパティ値をテーブル関連の値にすることで、テーブルの表示にします。

	@media only screen and (min-width:421px){
		#demo #words{
			display: table-row-group;
		}
		#demo dl{
			display: table-row;
			margin: 0;
		}
			#demo dl dt,
			#demo dl dd{
				display: table-cell;
				padding: 5px;
				border-left: 1px solid #ccc;
				border-top: 1px solid #ccc;
			}
		.....
	}
	

Chrome、Safari、Firefox、IE9対応。
IE8以下はdisplay:table-cell等をサポートしてないので、定義リストのまま表示されることになります。

inline-blockとoverflow-xを使う

inline-bock

セルの部分を横スクロールで見ることができます。

方法はまずtheadをfloat:leftで左に持ってきます。
tbodyにoverflow-x:auto、white-space:nowrapを指定して、中のコンテンツであるtrをdisplay:inline-blockにします。
こうすることでウインドウサイズ以上にコンテンツを横に並べ、はみ出した分スクロールバーが表示されます。
Chrome、Safari、Firefox対応。

	@media only screen and (max-width: 420px) { 
		table thead{ 
			display: block; 
			float: left; 
		}
		table tbody{ 
			display: block; 
			width: auto; 
			position: relative; 
			overflow-x: auto; 
			white-space: nowrap; 
		}
		table tbody tr{ 
			display: inline-block; 
			vertical-align: top; 
		}
		.....
	}
	

参考サイト:Responsive Tables (2) – David Bushell

display:boxを使う

box

上記と考え方は同じですが、
display:-webkit-boxを使うともっと少ないコードで簡潔に書くことができます。
※この方法ではFirefoxで崩れてしまうのでdisplay:-moz-boxは書いてません
Chrome、Safariのみ対応。

	@media only screen and (max-width: 420px) { 
		table tbody{ 
			display: -webkit-box;
			overflow-x: auto; 
		}
		table tr,
		table th,
		table td{ 
			display: block; 
		}
		.....
	}
	

参考サイト:Responsive Tables (2) – David Bushell

タップでテーブルのみを表示する

touch

小さいウインドウサイズではセル内のデータを非表示にして、タッチボタンを表示します。
ボタンをクリックするとjQueryを使ってhtmlにclassを追加します。
この追加したclassを利用し、テーブル以外のタグを非表示とすることで、
擬似的にテーブルのみを別画面で表示させたようになります。
Chrome、Safari、Firefox対応。

	$(function(){
	  $("table").click(function(){
		$("html").toggleClass( $(this).attr("class") );
	  });
	});
	
	@media screen and (max-width: 420px){
		/*タップ前の表示*/
		html:not(.sales) table:before {
			content: "Table: タップして表を見る";
			display: block;
			position: absolute;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.6);
			color: #fff;
			font-weight: bold;
			font-size: 1.5em;
			text-align: center;
			vertical-align: middle;
			z-index: 100;
		}
		/*タップ後の表示*/
		html.sales table{
			width: 600px;
		}
		html.sales table:before {
			display: block;
			background: #333;
			padding: 10px;
		}
		/* tableコンテンツ以外は非表示 */
		html.sales p, html.sales h1 {
			display: none; 
		}
		.....
	}
	

jQueryでタグを書き換える

jQuery

jQueryを使ってtableのタグを<div class="XXXX">に置き換えます。
大きいスクリーンサイズではdisplay:table-cellなどテーブル関連のスタイルを使い見た目をテーブルのデザインにします。

Chrome、Safari、Firefox、IE9対応。

	// thead内のtdの数をかぞえる
	var head_col_count =  $('thead td').size();
	// 上でカウントしたtdの数だけ処理を繰り返す
	for ( i=0; i <= head_col_count; i++ )  {
		// ヘッダーのテキストを抽出
		var head_col_label = $('thead td:nth-child('+ i +')').text();
		// tdを <div class="column" data-label="label"> に置き換える
		$('tr td:nth-child('+ i +')').replaceWith(
			function(){
				return $('<div class="column" data-label="'+ head_col_label +'">').append($(this).contents());
			}
		);
	}	
	// tableを <div class="table"> に置き換える
	$('table').replaceWith(
		function(){
			return $('<div class="table">').append($(this).contents());
		}
	);	
	// thead を <div class="table-head"> に置き換える
	$('thead').replaceWith(
		function(){
			return $('<div class="table-head">').append($(this).contents());
		}
	);	
	// tr を <div class="row"> に置き換える
	$('tr').replaceWith(
		function(){
			return $('<div class="row">').append($(this).contents());
		}
	);	
	// th を <div class="column"> に置き換える
	$('th').replaceWith(
		function(){
			return $('<div class="column">').append($(this).contents());
		}
	);
	

参考サイト:Responsive Data Tables with jQuery – Mobifreaks

MediaTableを使う

media-table.js

jQueryのプラグインMediaTableを使います。
テーブルの上にコントローラーが表示され、チェックをつけたり外したりすることでセルの表示非表示を切り替えが出来ます。

使い方はthepeg/MediaTable · GitHubよりファイル一式をダウンロードします。
適切な場所にファイルを保存してjquery.mediaTable.cssとjquery.mediaTable.jsを読み込みます。
メディアクエリに対応していないと大きいウインドウサイズの時に全部の情報が表示されないのでIE8以下にはrespond.jsを読み込みます。
jQueryもCDNから読み込みます。

<link rel="stylesheet" href="jquery.mediaTable.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.mediaTable.js"></script>
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->

media-tableを適応させたいテーブルにmediaTableを実行させます。

$(function(){
	$('.mediaTable').mediaTable();			
});

tdのclassでpersistを指定すると常に表示され、非表示にはできません。
essentialを指定すると常に表示され、表示非表示選択ができます。
optionalは768px以下で非表示、何も指定しないと1024px以下で非表示となり、いずれも表示非表示が選択できます。
Chrome、Safari、Firefox、IE7以上対応です。

参考サイト:A Responsive Design Approach for Complex, Multicolumn Data Tables

Responsive Tablesを使う

responsive-table

jQueryのプラグインresponsive-table.jsを使います。
動作は「inline-blockとoverflow-xで対応」に近いです。

Responsive Tables with CSS/JSよりファイルをダウンロードして、JavaScriptとCSSを読み込むだけなので設置は簡単です。

IE8以下にこのJavaScriptを読みこませると表示が崩れるので条件分岐コメント使ってIE8以下には適用させないようにしました。
Chrome、Safari、Firefox、IE9対応。

<link rel="stylesheet" href="responsive-tables.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--[if !lt IE 9]><!-->
<script src="js/responsive-tables.js"></script>
<!--<![endif]-->

終わりに

上記すべての方法はWebKitでは対応してますがIE9では一部の方法でしか対応できません。
今のところはWindowsPhoneの数が少ないとは言え今後を考えると完全に無視はできないところです。
IE…。

またResponsive Data Table Roundup | CSS-Tricksではその他に、Canvasを使った方法や、セルを項目によって色分けする方法なども紹介されてます。

あらゆるケースに対応できるベストと言える方法はまだありませんが、
こういった手法を取り入れて対応できるところは積極的に活用して、それ以外のケースは工夫を重ねていこうと思います。

Add Comment

本文

  1. [...] レスポンシブWebデザインでテーブルを使う時の小技 [...]

  2. [...] レスポンシブWebデザインでテーブルを使う時の小技 [...]

  3. [...] 更に、レスポンシブなTableの対応方法満載のHPを発見。すごいhttp://design-spice.com/2012/11/01/responsive-table/ [...]

  4. [...] テーブルをレスポンシブ対応にしてくれるプラグイン。日本語のサイトでは、Design Spiceさんが、詳しく使い方をまとめてくださっています。 [...]

  5. こんにちは。いつも有益な情報の発信、ありがとうございます。

    些末なご指摘で恐縮なのですが、
    「displayプロパティの値を変更する 1」の、
    本文1行目「tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更」が、
    “display”プロパティの誤植かと思います。

  6. hiro

    >とのさま
    ご指摘ありがとうございます!
    修正しておきました。

  7. [...] via: レスポンシブWebデザインでテーブルを使う時の小技 | Design-Spice [...]

  8. [...] レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice [...]

  9. [...] レスポンシブWebデザインでテーブルを使う時の小技 http://design-spice.com/2012/11/01/responsive-table/ [...]

  10. [...] レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice が参考になりました。 [...]

  11. [...] レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice [...]

  12. [...] レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spicehttp://design-spice.com/2012/11/01/responsive-table/ [...]

  13. [...] っこよくて、ユーザービリティも良好なテーブル組みの方法が掲載されています。 レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice うん、すばらしい! これでよくね? [...]

  14. キムチ

    こんばんは。
    レスポンシブWEBデザインで、テーブルの処理の参考にさせていただいており、大変ありがたく思っています。
    これは出来るかわからないのですが、「displayプロパティの値を変更する 1」の“[品詞]形容詞”のところで、“形容詞”のところを開業することは可能でしょうか?
    難しい印象がありますが、どうぞよろしくお願いします。

  15. hiro

    >キムチさん
    記事を読んでいただきありがとうございます。

    見た目上であれば、after 擬似要素にdisplay:blockを指定することで改行してるようにできると思います。
    #table tbody td:nth-of-type(1):before { content: “[品詞]“; display:block; }
    こちらで試してみてください。

  16. […] 、td部分をスクロールしたり、表組部分を別表示にしたりと色んな方法があります。 以下の記事がとても参考になります。 レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice […]

  17. MICK

    こんにちは。いつも参考にさせていただいております。
    ひとつ解決できない問題がありまして、よろしければ
    ご指導いただきたいと思いまして・・・。
    [inline-blockとoverflow-xを使う]について、
    内の文字列(DEMO内の「yes」や「no」)を
    改行してしまうと、theadが左に来た際に、ズレが
    生じてしまいます。これを解決する方法はありませんでしょうか?
    以上、何卒よろしくお願いいたします。

  18. hiro

    MICKさん

    このケースの対応としては下記のような方法が考えられます。
    ・br{dispaly:none;}として改行を無くす
    ・改行されることが決定であればnth-child(n)セレクタを使い高さを指定する
    ・jsで高さを取得して指定する

    MICKさんの状況にふさわしい方法かは分かりませんが参考にしていただければと思います。

  19. […] いくつかの実装パターンは「レスポンシブWebデザインでテーブルを使う時の小技」という人気記事で紹介されています。この記事で紹介されているものの多くは、CSSのdisplayプロパティの […]

  20. […] レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice […]

  21. […] 、表をモバイル対応にしても縦長になっては意味がないので、レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spiceでご紹介されているoverflow-xを使う方法を参考にテーブルのみ […]

  22. […] レスポンシブWebデザインでテーブルを使う時の小技 […]

  23. […] displayプロパティの値を変更する 引用元:http://design-spice.com/2012/11/01/responsive-table/ […]

PAGE TOP