[CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア

Webページをレスポンシブ対応にする時、悩ましいコンテンツの一つがテーブルではないでしょうか。単にセルの幅を狭くするだけでは、一行に一文字しかない妙に縦長なテーブルになってしまいます。 省略したり、プルダウンを利用したりなどいろいろなアイデアがありますが、もっとシンプルで簡単に、そして実用的な賢い実装アイデアを紹介します。 Responsive table layout レスポンシブ対応のテーブルのデモ レスポンシブ対応のテーブルの実装 レスポンシブ対応のテーブルのデモ デモでは4x5のテーブルで、さまざまなデバイスのスクリーンサイズでコンテンツが最適になるよう実装されています。

[tetsuhiko-kajino]

table

[yorozuna]

ちょっと古いブラウザが対象になってると使えないのもあって時々忘れるのでメモ。

[pmint]

あとは1レコード分の表の左側に見出しを付けたい。ACCOUNT列を90度反時計回りにして左端に。/ 各セルに「aria-label」を加えてレスポンシブに…何を言ってるやらと思ったら"content: attr(aria-label)"だって。普通に<label>使っとけ。

[etakaha]

aria-labelを使う

[ufomap]

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

[Hi32]

行と列を入れ替える見た目だが、ソースではaria-labelを使いtd:before {content: attr(aria-label);}で呼び出す。1行ずつ書くのか

[muyuuu]

#読んでる. [CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア | コリス: http://bit.ly/2dHqLXd — むゆう (@anticyborg) October 11, 2016