table-layout
Home>CSS>プロパティリファレンス>table-layout
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プロパティを優先します。
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-10-16