table-layout

CSSプロパティ「table-layout」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

table-layout

テーブルの列幅の表示方法を指定するプロパティ。

通常（auto）はセル内に書かれた内容により自動で各列の幅が決定されるが、値を指定することで幅を固定（fixed）させることができる。この場合、widthにより幅が指定されていない場合は、均等に揃えられる。

値

fixed 列の幅を固定して表示。widthにより幅が指定されていない場合は均等に表示される。
auto 標準。セル内の内容によって列の幅が変動する。

使用例 - サンプル(A) / サンプル(B)

サンプル(A)

[CSSの記述]

.sampleA { width:100%; table-layout:auto; }

[HTMLの記述]

<table border="1" class="sampleA">
	<tr><th>1着</th><td>ディープインパクト</td><td>武豊</td></tr>
	<tr><th>2着</th><td>ポップロック</td><td>O.ペリエ</td></tr>
	<tr><th>3着</th><td>ダイワメジャー</td><td>安藤勝己</td></tr>
</table>

[ブラウザ上の表示]

1着ディープインパクト武豊
2着ポップロックO.ペリエ
3着ダイワメジャー安藤勝己
サンプル(B)

[CSSの記述]

.sampleB { width:100%; table-layout:fixed; }

[HTMLの記述]

<table border="1" class="sampleB">
	<tr><th>1着</th><td>ディープインパクト</td><td>武豊</td></tr>
	<tr><th>2着</th><td>ポップロック</td><td>O.ペリエ</td></tr>
	<tr><th>3着</th><td>ダイワメジャー</td><td>安藤勝己</td></tr>
</table>

[ブラウザ上の表示]

1着ディープインパクト武豊
2着ポップロックO.ペリエ
3着ダイワメジャー安藤勝己