【小ネタ】CSS だけで Table 要素をレスポンシブ対応させる方法 | PSYENCE:MEDIA
display－スタイルシートリファレンス display - CSS | MDN このように table は関連する各要素に対して固有の display 属性がデフォルトで設定されています。決して table という HTML タグ自体がテーブルレイアウトを実現しているのではありません。ならばこの dispaly 属性を CSS 側でどうにか制御すれば、モバイル端末といった表示領域が狭い環境にも適したレイアウトが組めるということになります。 DEMO See the Pen Blocked table - Demo of Responsive table by wakamsha (@wakamsha) on CodePen. こちらのデモをベースにしていきます。 とりあえず全部ブロック要素にしとけ 何も考えずに全てのtable 関連要素をブロック要素にしてみました。当然ですが、全てのセル
レスポンシブ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にはメディアクエリを読ませないよ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
