table-layout

Home>CSS>プロパティリファレンス>table-layout

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

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

table-layoutプロパティの役割

table-layoutプロパティは、表をレイアウトする際に、固定か自動かを指定します。

table-layoutプロパティは一部のブラウザでは動作しません。

table-layoutプロパティに設定できる値

auto 自動レイアウトアルゴリズム。初期値。セル内のコンテンツによって表の横幅が決まる。
fixed 固定レイアウトアルゴリズム。表の横幅が定義されている場合に、セル内のコンテンツではなく、表の横幅・列幅・枠の太さ・セルとセルの間隔からレイアウトする。

table-layoutプロパティの使い方

<table style="table-layout:fixed;width:150px;" border="1">
<tr>
<td style="width:100px">これはセル1の内容のコンテンツです</td>
<td style="width:100px">これはセル2の内容のコンテンツです</td>
<td style="width:50px">これはセル3の内容のコンテンツです</td>
</tr>
<tr><td >セル1</td>
<td >セル2</td>
<td >セル3</td>
</tr>
</table>
<p>2番目のテーブル(auto)</p>
<table style="table-layout:auto;width:150px;" border="1">
<tr><td style="width:100px">これはセル1の内容のコンテンツです</td>
<td style="width:100px">これはセル2の内容のコンテンツです</td>
<td style="width:50px">これはセル3の内容のコンテンツです</td>
</tr>
<tr><td >セル1</td>
<td >セル2</td>
<td >セル3</td>
</tr>
</table>

1番目のテーブル(fixed)

これはセル1の内容のコンテンツです これはセル2の内容のコンテンツです これはセル3の内容のコンテンツです
セル1 セル2 セル3

2番目のテーブル(auto)

これはセル1の内容のコンテンツです これはセル2の内容のコンテンツです これはセル3の内容のコンテンツです
セル1 セル2 セル3

1番目のテーブルは、table-layoutプロパティにfixedが指定されています。
各セルに設定されている横幅や枠線の太さから、全体の幅を決めています。table要素に指定されているwidth:150pxは無視されます。

2番目のテーブルは、table-layoutプロパティにautoが指定されています。
各セルに指定されたwidthプロパティを無視し、table要素に指定されたwidthプロパティを優先します。

関連リンク

よく読まれている記事

UpDate:2010-10-16