使い方

横に並べたい要素にdisplay: table-cell;を指定し、その要素を囲む親要素にdisplay: table;を指定する。
display: table;はHTMLのtable要素を指定したテーブルレイアウトをやっていることは同じ。それをCSSだけで実現できる。
高さを揃えた横並びのレイアウトや、縦方向への中央揃えが簡単にできるようになる。

例

<divclass="parent"><divclass="child">aaa</div><divclass="child">bbb</div><divclass="child">ccc</div></div>

.parent{display:table;width:100%;border:2pxsolidred;margin-top:10px;}.child{display:table-cell;border:1pxsolidblue;}

display: table;を指定したした要素はそのままだとこ要素分しか広がらないので、画面横幅いっぱいに広げるためにwidth: 100%;を指定している。

• width: 100%;を指定しなかった場合
  

display: table-cell;で指定した子要素どうしに間隔をあけたい場合

子要素にmarginを指定するのでなく、親要素にborder-collapse: separate;,border-spacing:プロパティを指定する。

例

.parent{display:table;width:100%;border:2pxsolidred;margin-top:10px;border-collapse:separate;border-spacing:10px5px;}