menu
menu

CSS3のdisplay:tableとdisplay:table-cellでレイアウト | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook4
  • はてなブックマーク4
  • Google+4
  • Pocket0
  • Twitter0

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

  • Labs

CSS3

こんにちは(・∀・)

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


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

 *IE6、IE7未対応です。

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
  • facebook4
  • はてなブックマーク4
  • Google+4
  • Pocket0
  • Twitter0