display: table;を使ってリキッドレイアウトをする際の注意点

タイトルは多少釣り臭いのですが、display: table;を使って、幾つかの要素を含むかつ、リキッドレイアウトで実装を行う際にハマったポイントを紹介したいと思います。

正解例

今回僕が作りたかったものはこんな感じです。

失敗例

／(^o^)＼ナンテコッタイ

このように、真ん中の任意の文字列が入る要素に、overflow: hidden; 及び text-overflow: ellipsis; を適用してレイアウトが崩れないようにしたかったのですが、文字列が入る要素が他を圧迫していることが分かると思います。

まずはソースコードから

htmlだよ

<ul>
    <li class="table">
        <div class="Icon1">
            <img src="http://placehold.it/50x50" />
        </div>
        <div class="Infomation">
            <p class="string1">
	             ここに入る文字列を、text-overflowを使ってカットしたい。
            </p>
            <p class="string2">substring</p>
         </div>
         <div class="icon2">
	         <img src="http://placehold.it/50x50" />
         </div>
         <div class="icon3">
    	     <img src="http://placehold.it/50x50" />
         </div>
	</li>
</ul>

CSSはコチラ

li.table {
    padding: 1% 0%;
    width: 100%;
    display: table;
    // こいつがあるなしで大違い！
    table-layout: fixed;
}
div.icon1 {
　display: table-cell;
    vertical-align: middle;
    width: 10%;
}
div.icon1 img {
　width: 100%
}
div.information {
　display: table-cell;
　vertical-align: middle;
　padding: 0 4%;
　width: 62%;
}
div.information .string1 {
　font-weight: bold;
　width: 100%;
　overflow: hidden;
    text-overflow: ellipsis; // safari, chrome用
    -o-text-overflow: ellipsis; // opera用
　-moz-text-overflow: ellipsis; // Firefox 用
    white-space: nowrap; // 日本語が対象の場合は必須
}
// 以下省略...

解説

まずli.tableにて、display: table;を指定してあげることによって、その子要素のdivで display: table-cell;を使えるようにします。

こうするとあとは昔なつかしのテーブルレイアウト（実はほとんどした事無いですが）のように、幅を指定してあげれば勝手にテーブルっぽいレイアウトの完成です。

ここで上の画像の明暗を分けるのが、display: table;を指定している親要素にtable-layout: fixed;を書くかどうか。この一点です。

書かなかった場合、幅を指定しているにもかかわらず、overflow: hidden;が適用されず、とても残念なことになります。

table-layoutとは？

コチラのサイトの記事を引用させて頂きます - http://w3g.jp/css/table/table-layout

table-layoutプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。

fixed
表全体の横幅が明示されている（widthプロパティを用いると良い）場合に、表の水平方向の列幅はセルの内容量に依存しない代わりに、表全体の横幅・列幅・ボーダーサイズ・セル間の距離によってレイアウトされる固定レイアウトアルゴリズムを用いる

auto
表の横幅はセルの内容量に依存、表全体の横幅や高さを指定していても、セルに内容が収まらないと、指定は反映されず、表全体のデータを読み込んでから、その内容に応じて各列幅を決定し表示する自動レイアウトアルゴリズムを用いる

何も書かない場合は、autoに設定されているので、セルの内容物に応じて幅が変更される→幅指定を無視しているかのように見える。というカラクリだと思います。

リキッドレイアウト？

また、リキッドレイアウトとタイトルに書いたのは、幅指定をパーセントではなく、pxで指定してあげると上記のような挙動は示さなかったからです。

今回はこんな感じで。CSSはなんとなくで書いてると結構落とし穴があるので怖いですね。(ハック技がやたら横行している時点で言語としてはどうかと思いますがw)