中堅コーダーがハマった「display:table」の落とし穴3つ。



テーブル

こんにちは、アンドレです。
それなりにコーディングをやってきて、CSSでハマることも少なくなってきましたが、それでもハマるときはハマります。
今回は、最近ハマった「display:table」の落とし穴を3つご紹介します。
(※PC表示想定、2017/9/5時点の各ブラウザ最新版で確認)

幅が少数点以下についてこない(Chrome)

●サンプル

See the Pen 小数点以下についてこない by Takamasa Okada (@NP-okada) on CodePen.

上のサンプルをChromeでご確認いただくと、「3」のセルの右側、黒い背景が見えていませんか?
(見えていない場合、横方向に伸ばしたり縮めたりしていただくと見えると思います)
ulに黒の背景、liに幅33.33%と灰色の背景を指定しているのですが、ulの領域を埋めることができていません。
Chromeではdisplay:tableの要素の幅は整数にしかならないようです。

●解決法

See the Pen 小数点以下についてこないを解決 by Takamasa Okada (@NP-okada) on CodePen.

display:tableは諦め、それ以外の方法で垂直中央揃えを実現することにしました。
具体的にはli>spanにtop:50%とそれを有効にするためのdisplay:blockおよびposition:relativeを指定し、transform:translateY(-50%)で要素(span)の高さの半分上にずらし、垂直中央揃えとしています。
transformを使うので対応ブラウザはIE9以上となります。

ボーダーを指定すると、絶対配置の基点に差異が生まれる

●サンプル

See the Pen 基点が違う by Takamasa Okada (@NP-okada) on CodePen.

上のサンプルをChromeとFirefoxでそれぞれご確認いただくと、赤いドットの位置が違うはずです。
display:tableの要素にボーダーとposition:relativeを指定した場合、position:absoluteを指定した要素(今回は赤いドット)の基点は、Chromeはボーダーの内側なのに対し、Firefoxはボーダー含みとなるようです。

●解決法

display:tableの要素をdivで包んでそのdivにposition:relativeを指定するか、子要素にボーダー指定を移すなど、CSSプロパティのいずれかを移してやれば問題ないです。

overflow:hiddenは無効(Firefox)

●サンプル

See the Pen overflow: hiddenは無効 by Takamasa Okada (@NP-okada) on CodePen.

上のサンプルをFirefoxでご確認いただくと、左から右に流れていく黒色の背景が、グレーの背景の領域からはみ出ても表示されてしまっているはずです。
display:tableの要素に指定している、overflow:hiddenが効いていません。

●解決法

display:tableの要素をdivで包み、そのdivにoverflow:hiddenを指定するのが一番シンプルで確実かと思います。

まとめ

垂直方向の中央揃えを実現するのに、display:table(とdisplay:table-cell)はよく使うのですが、display:blockと同じ感覚で使っていると、思わぬ落とし穴があったりします。
table系の挙動は、Chrome等のwebkit系とFirefox・IEとで差異が出やすいようなので、コーディングの際には双方でプレビューしつつ進めるとよいかと思います。
それでは、よきtableライフを。