【Labs】CSS3のプロパティdisplayの値tableとtable-cellでレイアウト

こんにちは（・∀・）

今日はdisplayプロパティの値tableとtable-cellについてのご紹介になります。

displayプロパティについてはこちらをご確認ください。
【CSS3リファレンス】display

CSS3のプロパティdisplayの値tableとtable-cellでレイアウト

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

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

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

table系プロパティの値なのでvertical-alignで要素内の縦位置の指定もできます。

1. サンプル

HTML

<div class="demo">
<div class="row1">
<div class="cell1">
<h2>cell1</h2>
<!--cell1--></div>
<div class="cell2">
<h2>cell2</h2>
<!--cell2--></div>
<div class="cell3">
<h2>cell3</h2>
<p>自動で横並びになり高さも一番大きい<b>cell</b>に揃えます。</p>
<!--cell3--></div>
<!--row1--></div>
<div class="row2">
<div class="cell1">
<h2>cell1</h2>
<!--cell1--></div>
<div class="cell2">
<h2>cell2</h2>
<!--cell2--></div>
<div class="cell3">
<h2>cell3</h2>
<!--cell3--></div>
<!--row2--></div>
<!--demo--></div>

CSS

.demo {
  display: table;
}
.demo .row1,
.demo .row2 {
  display: table-row;
}
.demo .cell1 {
  display: table-cell;
  background: #d49fc2;
  border: 1px solid #ddd;
}
.demo .cell2 {
  display: table-cell;
  background: #9fb7d4;
  border: 1px solid #ddd;
}
.demo .cell3 {
  display: table-cell;
  background: #ccc;
  border: 1px solid #ddd;
}

Result

サンプルデモ
スマホでの確認はこちら

table系プロパティの値なので普通に表で使うのが妥当でしょうがレイアウトとしても使えそうですね。次のデモで試してみます。

2. サンプル

HTML

<div class="demo">
<div class="cell1">
<h2>cell1</h2>
<!--cell1--></div>
<div class="cell2">
<h2>cell2</h2>
<p>自動で横並びになり高さも一番大きい<b>cell</b>に揃えます。</p>
<!--cell2--></div>
<div class="cell3">
<h4>cell3</h4>
<!--cell3--></div>
<!--demo--></div>

CSS

.sample-demo .demo {
  margin: 0 auto;
}
.demo .cell1 {
  background: #d49fc2;
}
.demo .cell2 {
  background: #9fb7d4;
}
.demo .cell3 {
  background: #ccc;
}
.demo p,
.demo h2 {
  padding: 10px;
}
@media (min-width: 768px) {
body {
  min-width: 1200px;
}
.demo {
  display: table;
  width: 1200px;
}
.demo .cell1 {
  display: table-cell;
  background: #d49fc2;
  width: 200px;
}
.demo .cell2 {
  display: table-cell;
  background: #9fb7d4;
}
.demo .cell3 {
  display: table-cell;
  background: #ccc;
  width: 300px;
}
/* ** */}

Result

サンプルデモ
スマホでの確認はこちら

レイアウトとしても使えそうです。レスポンシブデザインでスマホサイトではdisplay:tableは設定してません。しかしdisplay:flexでできることなのであえてdisplay:tableでレイアウトをする必要性はないように思います。

その他display系tableの値

関連リンク

【Labs】display:flexについて
【CSS3リファレンス】display

参考

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