スマートフォンの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のダイアログボックスをそのまま使いました。管理バーが崩れてるのはご愛嬌。