[css,css3,table]レスポンシブデザインでのテーブル(table)の扱いをまとめてみた

レスポンシブデザインでのテーブル(table)の扱いをまとめてみた
レスポンシブデザインで困るのがテーブル(table)ですよね。
どう処理しようか迷うところです。

今回はテーブル(table)を大きく3つの種類に分け、それぞれの対処法を紹介します。

まずはどうなるかデモで確認してみてください。
※画面を640px以下にしてみてください。

1.単純なtableの場合

単純なtableの場合
単純なっていうのはthが左列でtdも1列のみと言うことです。↓

これに対してCSSは↓

thとtdの処理をした後のメディアクエリでthとtdをdisplay:block;し、面倒なのでborderはなくしただけです。
こういう単純なテーブル(table)だと簡単に処理できますね。

2.thが横並びで横に長い場合

thが横並びで横に長い場合
これはちょっと骨が折れます。
コピペで機能するようにコードは書いてあります。

まずはテーブル(table)

複雑でもなんでもないテーブル(table)ですが、スマホの狭い画面に横長なのがネックです。
これに対してcssは↓

theadはdisplay:block;してfloat:left;しているだけなのに対してtbodyはoverflow-x: auto;でスクロールバーを自動で出し、white-space: nowrap;で下にずれるのを防いでます。
border関係がちょっと面倒で、th、tdのborderを消し、trで追加しているところがポイントです。

最初のメディアクエリにletter-spacing: -0.4em;とありますが、後のtrに対してdisplay: inline-block;でtrに隙間が開くためです。
※詳しくは「display:inline-blockでできる隙間をなくす方法」もご覧ください。

コピペで使用してくださる場合はテーブルn(table)にthead、tbodyを忘れずに、テーブル(table)のclass名は適当に変えていただければ問題なく動くと思います。

3.thが縦並びで横に長い場合

thが縦並びで横に長い場合
これもテーブル(table)としては複雑でもなんでもないんですけど、スマホ画面に対して横長すぎますね。

これは対してcssは↓

trをすべてdisplay: block;して縦1列にしています。
それからtdのみdisplay: list-item;にしてリスト表示に変更しています。
後は行頭文字やmarginを指定してあげればOKです。

まとめ

他にも色々な方法があるみたいですが、とりあえずこの3つの方法を知っていればなんとかなるかなって方法でした。
面倒なのがrowspanやcolspanしてるテーブルですね。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク