近年のスマホの普及に伴い、多くのウェブサイトがスマホに対応しました。

多くのウェブ制作者はスマホ対応作業を行うにあたって覚えたCSSは多いのではないでしょうか。

私は、スマホ普及前はCSSのdisplayなんて「block」と「none」くらいしか知りませんでしたし、それで不都合もありませんでした。

前置きはさておきCSSの「display:table;」はレスポンシブWebデザインを行うにあたりとても便利な宣言です。

CSS「display:table;」とは

「display:table」は<table>以外のものでもテーブルのように表示するためのCSSです。これを使えば<table>タグを使わずにテーブルのような見た目を作れます。

例えば、上記のような記述をすれば以下のような見た目になります。見た目はまんまテーブルです。「border-collapse」も「vertical-align」も使えます。

「わざわざこんな記述しなくても素直に<table>タグを使えば？」と、思うかもしれませんが、スマホでこのテーブルを表示すると以下のように本社所在地の項目がとても見難くなってしまいます。

「display:table」を使う利点はメディアクエリの指定でテーブル表示を止められることです。

そこでメディアクエリを以下のように指定します。

「display:table」、「display:table-row」、「display:table-cell」はすべて「block」にして解除した上で、一列表示に対応させます。

無事、スマホでも見やすい表示になりました。

今回の例のようなケースでは「display:table」の代わりに「float」を使っても良いかとも思いますが、テーブルなのでvertical-alignを使えたり、隣のセルとheightが同一になるので使い勝手がとても良いです。