[CSS] Tableのレスポンシブについて考える

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

Webページにテーブルデータを表示させる時に、PCブラウザの画面いっぱい表示するようなエクセル画面を、「スマホ対応してくれ」と言われて困った経験のあるWebエンジニアは多いでしょう。
 

できれば、TableマトリクスデータをCSSのみを使って表示を切り替えたいというのが、その後の不具合も発生しずらい為、少し拘って考えてみたいと思います。

Bootstrapでの対応

レスポンシブと言えば、Bootstrapを使う人も多いと思いますが、Bootstrapでのレスポンシブ対応は、主に以下の3つです。

セル内の文字改行
セルの横幅縮小
テーブル全体の横スクロール対応

Always responsive | Bootstrap
 

classに”table-responsive”を付与するだけですが、レスポンシブって言っていいのか?というレベルです。
 

スクリーンショット 2017-12-04 11.36.12
 

↓↓↓↓
 

スクリーンショット 2017-12-04 11.36.42
 

スクリーンショット 2017-12-04 11.37.36
 

セルをブロック化

tableのセルを”display:block;”にするとどうなるでしょう?
 

スクリーンショット 2017-12-04 11.46.54
 

積み木を積み上げたような感じになりました。
 

縦の連動が無くなるので、tableとしてのマトリクス表示の機能はなく成りますね。
 

ちなみに、この場合のCSSは以下のとおりです。
 

縦並びバージョン

上記のヘッダをなくして、データだけ縦並びにしたのが以下のバージョンです。
 

スクリーンショット 2017-12-04 11.50.59
 

スマホ表示としては、悪くないですが、見出しが無くなるというのは、非常に分かりにくい状態になります。
 

さらに、見出しも擬似要素でつけると、ピポッドテーブルのような見え方になります。(実際は縦一列に並ぶのでピポッドテーブルとは違います)
 

スクリーンショット 2017-12-04 12.04.14
 

少しデザインにこだわり、見出しの幅を整えるとこんな感じ。
 

スクリーンショット 2017-12-04 12.09.51
 

いかがでしょう?この時のCSSは以下です。
 

まとめ

Tableデータを小さなスマートフォンの画面で見やすく表示するという方法は、さまざまなアプローチと、見る側の複数の要望があるので、一概に「これが正解」というものはありませんが、
 

スマートフォンの特性である、片手で持って、縦スクロールのみで、必要な情報を閲覧することができるという見せ方は、追求した方がいいと思われます。
 

この先に開発側で便利に行うためには、こうしたCSSを確定した後に、サイト内のtableデータで画面横サイズをオーバーしているものに関しては、自動でCSSが付与されるようにすることで、何も気にせずレスポンシブができるようになります。
 

この記事を読んだ人から、要望が多数あれば、今後時間が出来た時に、ライブラリを作って公開しますので、ご要望くださいませ。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です