【CSS3】［display:table-cell;］に［margin］を指定したい場合の処理。

CSS3 から使えるようになった新しいプロパティ display:table; とdisplay:table-cell; は、これまで［float］を使って組んでいたレイアウトを、より直感的に、より簡単に実現できるので大変便利です。

しかし display:table-cell; で指定したボックスには［margin］が効かないというデメリットもあります。

ここで紹介するのは、［border-collapse］と［border-spacing］を使ってセルの間隔を調整する方法です。

基本的に display:table; で指定した要素は、所謂「table」として扱われるので、当然［border-collapse］と［border-spacing］も効くようになります。

［border-collapse］はセルのボーダーを重ねるか間隔を空けるかを、［border-spacing］はどれぐらいの間隔を空けるのかを設定できます。
単位は「px」や「em」などで指定できて、display:table; を指定した要素に対して追加します。

.table {
	display:table;
	margin:0 auto;
	border-collapse:collapse;
}

セル同士の間隔を空けたくない場合、上記のように［border-collapse:collapse;］を指定します。

.table {
	display:table;
	margin:0 auto;
	border-collapse:separate;
	border-spacing:2px 0;
}

セル同士の間隔を空ける場合は border-collapse:separate; を指定します。

さらに、上記の例では border-spacing:2px 0; として、セルの左右に 2px づつの間隔を空けるように指定しています。

最近のウェブデザインのトレンドで［display:table;］は使いどころが多くなってきています。
ぜひお試しください。

ONZE/BLOGオンズ開発ブログ