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

サイト制作していると、必ず出てくるのが、テーブルだと思うのですが共通項が多いデータの一覧表示には重宝しますよね。

むしろ、テーブルを使う他、何か方法があるのかというところにも至りますが・・・

PCサイトだと問題なく表示されるものの、スマホサイトにするとみにくくなる。

技術者からだと「仕方がない」というのがあるのかなとも思っていたのですが、やはりユーザーが見て見づらさがあるということは、クライアントにとってもマイナスになるのではと思い調べて見ました。

 

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

 

なるほど・・・

 

レスポンシブにした場合、

1. 1.theadを消す
2. 2.tdにaria–label=“”を入れる
3. 3.:beforeでaria–labelの内容を表示

確かにこの方法だと、綺麗に見せられるのはわかりました。

あと、見やすい・・・でも、なんかこの方法でいいのかなというモヤモヤ感が・・・w

 

もしかしたら、dlのリストタグで同じようにテーブルを作って

order=”n”で順番の入れ替えをするほうがいいのではとさえ・・・

テーブルの内容が固定で、あまり改修の必要性がない場合・・・の話ですが。

 

スマホに対応するのがもはや必須となっているので、綺麗にテーブルを見せる方法を考える必要があるかもしれません。