• このエントリーをはてなブックマークに追加

2014年05月31日(Sat)

CSSを使ってDIVでtableを組む

CSSを使ってDIVでtableを組む

tableと言うか、横並びにしたDIVの高さを揃えることが出来るstyleタグです。

CSS

.table{
	/* 親要素 */
	display: table;
	/* 均等幅 */
	table-layout: fixed;
	/* 幅 */
	width: 100%;
	/* ボーダー */
	border:1px solid #CCCCCC;
}
.table .td{
	/* 子要素 */
	display: table-cell;
	/* 中央寄せ*/
	text-align:center;
}

HTML

<div class="table">
	<div class="td">左側のDIV</div>
	<div class="td">中央のDIV</div>
	<div class="td">右側のDIV</div>
</div>

サンプル

左側のDIV
中央のDIV
右側のDIV

コメント(0件)

CSSを使ってDIVでtableを組むに対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。 お気軽にコメントしてください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

【ソーシャルボタン】


TOP