tro-suke blog

Internet Explorer でもOK!!「display: table」

まだスタイルシート（CSS）というものがなかった頃、tableを使ってレイアウトしていた時代がありました。その後CSSが確立されてくると、 “tableを使ってレイアウトするのはよくない!!”というのが当たり前になって、tableという文字を見ると自然と回避してしまっていたところがあ りました。

IEでも思うようなレイアウトで表示できます

サイドバー固定でメインカラム可変のレイアウト、3カラムテンプレートについて、いろいろ試行錯誤していると「display: table」というものが目にとまりました。“table”= “表組み”という頭があったので、はじめは気にもとめていませんでしたが、どうやらこれで「サイドバー固定・メインカラム可変のレイアウト・3カラムテンプレート」は解決できそうです。IEの8でも思うようなレイアウトで表示してくれます。

使い方は「display: box」や「display: flex」と同じです。親要素に「display: table」を指定して横並びにさせたい要素に「display:table-cell」を指定すればOK。スタイルシートもシンプルに仕上がります。