menu
menu

キーワード検索

 

最近の投稿

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

  • Labs

CSS3

こんにちは(・∀・)

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

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

display:tableとdisplay: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の値
HTMLとの比較
HTMLの場合displayプロパティの値
<table>要素table
<thead>要素table-header-group
<tbody>要素table-row-group
<tfoot>要素table-footer-group
<tr>要素table-row
<th>要素・<td>要素table-cell
<colgroup>要素table-column-group
<col>要素table-column
<caption>要素table-caption
テーブルのインライン表示inline-table
関連リンク

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

参考

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

  • カテゴリー:Labs