レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 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にはメディアクエリを読ませないよ
スクロールできる表
表をかっこよくスクロール可能にするテクニックについてのResponsive scrollable tablesという記事を読んだ。この記事ではJavaScriptで表をdiv要素で括って、それから溢れたらスクロールバーを表示(+α)という形でやっている。これをいじってて気づいたんだけど、JavaScriptで追加マークアップをする代わりにtable要素のdisplayプロパティーをいじってやると簡単にスクロール可能な表になるようだ。 Demo: Scrollable Table 表を自動幅調整なし(幅固定)にするにはtable-layoutプロパティーを、各セルで折り返しなしにするにはwhite-spaceプロパティーをそれぞれ使う。それとdisplay: blockを組み合わせると、pre要素で文字がはみ出す時にスクロールさせるような感じになる。 table { display: blo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
