PR

構文

table-layout : 値;

説明文

　表をレイアウトする場合は，それぞれのセル内の文字列や画像などの量を考慮して計算が行われる。例えば，1列目が10文字程度，2列目が100文字程度あれば，2列目の幅の割合を大きくした表となる。このように表を表示するには全てのセルの内容を読み込んでから計算を行うため，表示までの時間がかかる。

　「table-layout」では，各セルの幅の計算方法を指定できる。「fixed」を指定すると表の1行目の情報で各列の幅を決定する。そのため，表計算の必要がないため，表の最後まで読み込むことなく表を随時表示できます。

使用例

● CSSの定義

table { table-layout : fixed;
        border-collapse: collapse; }
th, td { border : 2px solid gray; }

● HTMLの例

<h2>2008年F1グランプリ</h2>
<table>
	<tr>
		<th width="30px">ラウンド</th>
		<th width="150px">グランプリ名</th>
		<th width="200px">サーキット名</th>
		<th width="150px">勝者</th>
	</tr>
	<tr>
		<td>R1</td>
		<td>オーストラリアGP</td>
		<td>アルバートパーク・サーキット</td>
		<td>Lewis Hamilton</td>
	</tr>
	<tr>
		<td>R2</td>
		<td>マレーシアGP</td>
		<td>セパン・インターナショナル・サーキット</td>
		<td>Kimi Raikkonen</td>
	</tr>
         ：
</table>

● 表示結果

Internet Explorerの表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]