【CSS】display:table;・display:table-cell;での横並び

HTML

<div class="table">
	<div class="cell">
		<p>セル1</p>
	</div>
	<div class="cell">
		<p>セル2</p>
	</div>
	<div class="cell">
		<p>セル3</p>
	</div>
</div>

tableタグと同様の扱いになる親要素のclass="table"と、セル(th/td)に値するclass="cell"です。

CSS

.table {
	width:100%;
	display:table;
	border:1px solid #e4e4e4;
}
.cell {
	display:table-cell;
	vertical-align:middle;
	word-wrap:break-word;
}
.cell:nth-child(odd) {
	background-color:#e4e4e4;
}

親ブロックにdisplay:table;を、直下の子要素にdisplay:table-cell;を指定します。
HTMLのtableタグと同じ特性を持ちますので、横幅は内包するコンテンツの幅になります。指定があればwidthで指定しましょう。
また、縦位置調整もvertical-alignで、URLなどの途中で改行されない文章はword-wrap:break-word;で改行の仕方を指定出来ます。

画面表示

あくまでもHTMLのtableタグと同じ特性を持ちますので、セルに対してmarginは効きません。セル間の余白をあける場合は、border-collapse:separate;とborder-spacingを設定します。

注意が必要なのが、
・positionがきかないバージョンのブラウザが存在する事
・タブレットでは2カラム、スマホでは1カラムにするなどのレスポンシブレイアウト(グリッドレイアウト)での制御が難しい
・min-heightmax-heightがきかない
・word-wrap:break-word;による文字の折り返し(自動アルゴリズムレイアウト)が効かない場合がある
これらは一例ではありますが、気を付けなければいけません。しっかりと特性を理解し、正しい状況で使用できるようにしておきましょう。