fbpx

メニュー

スマートフォンのtable要素をレスポンシブにできない問題

高橋文樹 高橋文樹

この投稿は 12年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

最近レスポンシブデザインという言葉が流行っています。あまり深く考えたことはありませんが、個人的にはこんなところがいいなーと思ってます。

  • ワンソースで済む
  • Googleが推奨してる

駄目だなーと思うところはこんなです。

  • PHPのように動的なサイトの場合、非表示の要素でも演算対象になる
  • 古いAndroidブラウザが怖い

まあ、Webプログラミングの場合は携帯サイトを作っていたわけで、スマートフォンだからどうこうということでもないかなと思います。

ちなみにこのサイトは一応スマートフォンとPCで表示が変わりますが、CSSのメディアクエリはほとんど使ってなくて、bodyタグにデバイス種別のクラスをつけることで対処してます。Nginxのプロキシキャッシュはデバイスで分けてます。

さて、レスポンシブデザインでも疑似レスポンシブデザインでもいいのですが、どうしても解決できない問題が一つあります。それは、tableタグ。動的なサイトの場合、大抵テーブルのようなものがあります。このサイトでいえば、購入履歴ですね。

テーブルの項目が多い場合あるよね
テーブルの項目が多い場合あるよね

項目が少なければいいのですが、項目が多いと変な折り返しが発生してしまいます。このサイトではPCもそうなってますが……

横幅が狭過ぎてテーブルが変
横幅が狭過ぎてテーブルが変

では、どうするのが正解なのか。というわけで、jQuery Mobileを見てみます。すると、テーブルというか、リストというか、iOSのようなテーブルビューっぽいものしか見つかりません。

テーブルというか、リストだね
テーブルというか、リストだね

Appleの出してるiOS ヒューマンインターフェースガイドラインなんかにも、「複雑な構造を持つデータはテーブルビューで見せろや」と書いてあるのですが、そんな感じのドリルダウン式の見せ方になっています。iOSのメールとかと同じですね。

こういうのをCSSだけで出来たらいいんじゃないかと思ったのですが、どうも無理そうです。

暫定:ダイアログボックスを出す

暫定的な結論としては「主要ではない要素(th以外)を非表示にし、trタップでダイアログボックスを出す」です。

/*scss利用*/
#book-shelf .lwp-table{
	tbody tr td:nth-child(2),
	tbody tr td:nth-child(3),
	tbody tr td:nth-child(4){
		display: none;
	}
}
var bookShelf = $('#book-shelf .lwp-table');
if($('body').hasClass('smartphone') && bookShelf.length > 0){
	var modalBox = $('<div class="entry"></div>');
	modalBox.dialog({
		autoOpen: false,
		title: '決済情報詳細',
		modal: true,
		position: ['center', 'center'],
		width: 300,
		maxHeight: window.innerHeight - 56,
		resizable: false
	});
	bookShelf.find('tbody tr').click(function(e){
		var html = '<table><tbody>';
		for(i = 0, l =$(this).find('td').length; i < l; i++){
			html += '<tr><th>' + $(this).parents('table').find('thead th:eq(' + i + ')').text() + '</th><td>'+
				$(this).find('td:eq(' + i + ')').html() + '</td></tr>';
		}
		html += '</tbody></table>';
		modalBox.html(html);
		modalBox.dialog('open');
	});
}

iOSのスライドするビューをパクればいいのですが、探すのがめんどくさかったのでjQuery UIのダイアログボックスをそのまま使いました。管理バーが崩れてるのはご愛嬌。

ダイアログボックスを表示する
ダイアログボックスを表示する

というわけで、CSSのみの調整で挫折したらJSで補うといいよというお話です。もっといい解決方法をご存知の方はコメントなど下さい。

すべての投稿を見る

高橋文樹ニュースレター

高橋文樹が最近の活動報告、サイトでパブリックにできない情報などをお伝えするメーリングリストです。 滅多に送りませんので、ぜひご登録お願いいたします。 お得なダウンロードコンテンツなども計画中です。