CSSだけでレスポンシブ対応のtableを実装してみた

テーブルをメインに使用しているコンテンツをレスポンシブ対応する必要があるので、色々調べてみて実装してみました。

参考にしたサイトと実装デモ

色々見てみた中で、自分なりに一番しっくりしたレスポンシブ対応の参考サイトはこちら。

Responsive table layout · Matt Smith

これを基に実装したテーブルのデモはこちらになります。

レスポンシブ対応 table デモ

各テーブルの説明は下記になります。

縦並びの見出しテーブル

参考サイトとは関係ありませんが、一応縦並びの見出しテーブルのレスポンシブ対応も実装してみました。

会社概要風のテーブル

会社概要とかでよく使われている感じの一般的なテーブルです。

通常

レスポンシブ対応

見出しを上段、コンテンツを下段という形にしています。

HTML

CSS

ポイントは19-23行目でtr、th、tdのdisplayをblockに指定しているくらいです。

フォーム風のテーブル

下図のようなタイプのレスポンシブ対応も欲しかったので実装してみました。

通常

レスポンシブ対応

最初のと同じ感じですが、見出しとコンテンツの間を詰めています。

HTML

CSS

横並びの見出しテーブル

参考サイトを基に、自分の環境に合わせて実装したテーブルです。

3パターンありますがCSSは共通なので、ここでCSSを記載しておきます。

61-84行目は2つ目のテーブル用、さらにその下の86-107行目は3つ目のテーブル用のCSSで、それ以外は共通という感じになっています。

テキスト情報のみのテーブル

手始めにまんまな感じで実装してみました。

通常

レスポンシブ対応

HTML

主なポイントは、見出し部分を<thead>で囲み、レスポンシブ対応時にdisplay: none;している感じです。
また、<td>要素にaria-label属性を付けて、レスポンシブ対応時にCSSで値を読み込んで見出しとして表示しています。

管理画面風に操作ボタンがあるタイプ

右端に操作ボタンがあるタイプのテーブルのレスポンシブ対応が必要だったのでカスタマイズして実装してみました。

通常

レスポンシブ対応

HTML

ボタン欄となる<td>要素にclass=”bt-area”を付けてやる事でボタンとしてレイアウトするように対応しています。

一括操作出来る風のテーブル

左端にチェックボックスがあるパターンのテーブルです。このタイプもそれらしいレスポンシブ対応になるようにカスタマイズしてみました。

通常

レスポンシブ対応

HTML

<table>にheader-checkクラスを付けています。このクラスで最初の<td>要素を左寄せ・縦長に変化させています。