【CSS】モバイルでも見やすい！レスポンシブなテーブルを作る

レスポンシブ：

Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。
引用：レスポンシブデザインとは【 RWD 】【 responsive design 】 – 意味/解説/説明/定義： IT用語辞典

レスポンシブデザインは便利ですが、全てがうまくいくわけでなく、テーブルの対応など、やっかいなものもあります。
テーブルは「会社概要」に使われたり、また情報を整理するために使われたりと、多様な使われ方をしますが、モバイル表示の時に見づらいという弱点があります。

今日はそんなテーブルレイアウトをレスポンシブにするTipsです。

テーブルの形状をガッツリ変える

See the Pen zxwvqV by Tsukasa Nagata (@nt-uni) on CodePen.0

いかがでしょう？ 650px以下にすると、テーブルの形状をかえて1列で表現します。ブラウザ毎横幅を縮めてみてください。（スマフォで見てる方ははじめから一列表示になると思います…すみません）

表としてボリュームが少なければ、モバイルでも確認しやすいこの形がオススメです。

実装

実は、テーブルタグを使わないで表現しています。
<table>の代わりに<section class="table">といった具合です。

そして、以下のCSSでテーブルタグと同様の表現を実現します。

.table    { display: table }
.tr       { display: table-row }
.thead    { display: table-header-group }
.tbody    { display: table-row-group }
.tfoot    { display: table-footer-group }
.col      { display: table-column }
.colgroup { display: table-column-group }
.td, .th  { display: table-cell }
.caption  { display: table-caption }

そして650px以下のときはこのように、

@media (max-width: 650px) {
.table    { display: block }
.tr       { display: block }
.thead    { display: block }
.tbody    { display: block }
.tfoot    { display: block }
.col      { display: none }
.colgroup { display: none }
.td, .th  { display: inline-block }
.caption  { display: block }
}

※ 上記のCSSはベースとなる部分だけなので、列のタイトル表示や、背景色などは別途CSSで指定する必要があります