displey:table-cellを使ったレイアウト

iPhoneサイトを制作しているときに使用した「displey:table-cell」自分も若干理解していない部分があったため復習のためにまとめてみました。

Table-cellとは簡単にいうとcssだけでテーブルの構造ができるプロパティでTable-cellはhtmlタグでいうtd ,thタグの部類になります。

左のサイズが固定の３カラムレイアウトの場合

html

<div>left</div>
    <div>center</div>
    <div>right</div>

css

body{
		width:100%;
		display:table;
	}

	#left, #center, #right {
		display: table-cell;
	}

	#left{
		width:200px;
		background-color:#F93;
	}

	#right{
		background-color:#F99;
	}

	#center{
		background-color:#F60;
	}

その他の部類はこんな感じ

table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell; }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }

ちょっとこれで理解ができました(・ω・´)
よかったよかった(´ω｀＊)

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。