【CSS】要素を横並びで配置するdisplay:table-cell

要素を横並びで配置するには、CSS のfloat や display:inline-blockを使う方法がありますが、ここではtable-cellを使った方法を紹介します。このプロパティーを使うことでtable要素のスタイルを適用できます。

また通常親要素にdisplay:tableが指定された場合、子要素にdisplay:table-cellを使用します。これで子要素もth/tdのスタイルが適用できます。

display:table / display:table-cell指定

[CSS]　tableコラム

 #table {
　　width:100%;
　　display:table;
    }
 #side_a,#center,#side_b{
	display: table-cell;
	text-align:center;
    }
 #side_a {
	width: 100px;
	background-color:#FFCC66;
	vertical-align:top;
    }
 #center {
	width: 100%;
	background-color: #CC6633;
	vertical-align: middle;
    }
 #side_b {
	width: 80px;
	background-color: #FF9966;
	vertical-align: bottom;
    }

上記のように、親要素tableに「display: table;」を指定、子要素３つに「display: table-cell;」を指定します。

またcenterは「vertical-align: middle;とtext-align:center;で上下中央寄せにしました。またside_bボックスのように「padding:20px;」を指定していますが、borderやpaddingを使っても親要素のボックスからはみ出ないので、box-sizingを使わなくても気軽に設定できます。

side_a

center

side_b

均等幅に配置する

テーブルの列幅を固定レイアウトにしますが、これは幅が指定されていない列は幅が均等に割り当てられます。

行の高さは自動的に算出されます。以下のように横幅が指定されてない３つの列の幅が均等に配置されています。

[CSS]　table-layout：fixed;

 #table {
　　width:100%;
　　display:table;
　　table-layout:fixed;
    }
    
 #table-row{
	display:table-row;
	}
 #side_a,#center,#side_b{
	display: table-cell;
    }

side_a

center

side_b

「table-row」を指定する

これはtr要素のスタイルとして使われます。これを使って複数のテーブル段組みの作成ができます。

[CSS]　display：table-row;

 #table {
　　width:100%;
　　display:table;
　　table-layout:fixed;
    }
    
 #table-row{
	display:table-row;
	}
 #side_a,#side_b,#side_c,#side_d,#side_e,#side_f{
	display: table-cell;
    }

[HTML]

<div id="table">
  <div id="table-row">
	<div id="sidetable1_a">side_a</div>
	<div id="sidetable1_b">center1</div>
	<div id="sidetable1_c">side_b</div>
  </div>
  <div id="table-row">
	<div id="sidetable1_d">side_d</div>
	<div id="sidetable1_e">center2</div>
	<div id="sidetable1_f">side_f</div>
  </div>  
</div>

side_a

center1

side_b

side_d

center2

side_f

marginは指定できない

「display:table-cell」を使った場合は、セル同士の間隔をmarginで指定しても効きません。これは td要素にmargin指定はできないからです。隙間を空ける方法としては、通常table要素でも使われている「border-collapse: separate;」と「border-spacing」を使えば解決できます。

[CSS]　border-collapse:separate;

 #table {
　　width:100%;
　　display:table;
　　table-layout:fixed;
　　border-collapse:separate;
　　border-spacing: 10px;
　　}
 #cell1,#cell2,#cell3{
　　display:table-cell;
　　vertical-align:middle;
　　text-align:center;
　　border:1px solid #666;
　　border-radius:5px;
　　-webkit-border-radius:5px;
　　}

cell1

cell2

cell3