レスポンシブ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にはメディアクエリを読ませないよ

[knruqwyhn]

いつも悩む。

[kagioo2uma]

結論：IE死ね

[cpw]

なにこれすごい。こんなことできるの知らなかった。

[yayocan]

テーブルのレスポンシブ対応

[jed_lee]

レスポンシブWEBデザインでのテーブル要素に関する見た目の工夫方法

[contractio]

すばらしい。

[masapon49]

display:list-item便利っすねぇ

[nobuocreate]

メモ

[kurobuchi]

スマホで表組みいい感じで見せるtips集。ありがたい。

[shinpiece]

テーブル　実装例　まとめ

[Yukarigohan]

レスポンシブ　テーブル

[nomaharu2013]

コピペして使える

[kongou_ae]

“// 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

[typista]

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

[bigchu]

table

[takjitan]

IE...

[hcnkino]

［フォーム］［問い合せ］

[homihoo]

CSSで簡単にレイアウトを変えるものからjQueryでのカスタマイズまで

[mei_koutsuki]

inline-blockとoverflow-x を使ったやり方がちょうどやりたい方法にぴったりだったわん。

[hopekuson]

ふむむ

[gen0083]

tableのことまで考えてなかったな。 / レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice

[norip44]

レスポンシブデザインで、tableを使うときの対策。ちっちゃくなっちゃいますからね～！　横幅たりないよっ、ってなるわけで。

[mabots]

使い分けですよね

[Queis109]

tableの処理　このへんのを使えばいけると信じている・・・

[miyoom]

レスポンシブ

[red_snow]

そのうち使う

[sugarshin]

from はてなブックマーク - 人気エントリー http://b.hatena.ne.jp/hotentry

[k_gobo]

こういう工夫をして提案したところでcolspanとか使ってきて全てが水の泡ってね……。

[kijtra]

tableのdisplay変えるのってわりと勇気いるのなんでだろ。

[diveintounlimit]

IE…

[kyotaweb]

いろんな発想があってすごい。