menu
menu

キーワード検索

CSS3のdisplay:tableとdisplay:table-cellでレイアウト

  • Labs

CSS3

こんにちは(・∀・)

昨日のレイアウト系の続きで今日もCSS3でレイアウトに関するプロパティの値でtable系のご紹介です。

これは昨日ご紹介したプロパティと違いIE8以降なら使えるプロパティです。当然モダンブラウザで使えますのでスマホサイトやタブレット系では即戦力として使えそうです。

display:tableとdisplay:table-cell

display:tableとdisplay:table-cellはtableでいう所のtableとtdの様な感じと思ってもらえばわかりやすいと思います。親要素にdisplay:tableを、子要素にdisplay:table-cellを指定します。

display:table-cellの子要素は自動で横並びに配置され高さも他の一番高い要素にあわせます。

display:table-cellを指定した要素は横幅を指定しなければ可変(リキッド)になります。横幅を指定したcellは固定幅となり、それ以外の横幅を指定していないcellは可変(リキッド)のままです。

table-layout:fixedを親要素に指定すればdisplay:table-cellで指定された子要素は均一幅で表示されます。その際親要素の横幅指定は必要です。table系プロパティの値なのでvertical-alignで要素内の位置の指定もできます。

サンプルデモ

サンプルデモはこちら

HTML

<div id="contents">
<div id="container">
<div class="leftcell">
<h2>leftcell</h2>
<!--leftcell--></div>
<div class="maincell">
<h2>maincell</h2>
<p>自動で横並びになり、高さも一番大きい<b>cell</b>に揃えます。<b>IE8以下では対応されていません。</b></p>
<!--maincell--></div>
<div class="rightcell">
<h2>rightcell</h2>
<!--rightcell--></div>
<!--container--></div>
<!--contents--></div>
CSS

#contents {
	display: table;
	margin: 0 auto;
}
#contents #container p {
	padding: 10px;
}
#contents #container .leftcell {
	display: table-cell;
	background: #d49fc2;
	width: 150px;
	height: 200px;
}
#contents #container .maincell {
	display: table-cell;
	background: #9fb7d4;
	height: 400px;
}
#contents #container .rightcell {
	display: table-cell;
	background: #ccc;
	width: 200px;
	height: 300px;
}
その他display系tableの値
HTMLとの比較
tableテーブルの指定
table-header-group<thead>要素
table-row-group<tbody>要素
table-footer-group<tfoot>要素
table-row<tr>要素
table-cell<th>要素・<td>要素
table-column-group<colgroup>要素
table-column<col>要素
table-caption<caption>要素
inline-tableテーブルのインライン表示
関連リンク

flexboxでレイアウト

参考

[意外と知らないCSS]スマホ制作に便利!display:table-cellを使った横並びのレイアウト
スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利!
CSS「display: table」と「display: table-cell」で出来ること

  • カテゴリー:Labs