ウェブランサー

table-layout - テーブル(表)の表示方法を指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 table要素
継承 しない

table-layoutプロパティは、テーブル(表)の表示方法を指定する際に使用します。

ブラウザは、通常テーブル全体を読み込んでから内容に合わせて幅を決定し、表示を開始します。table-layoutプロパティに[fixed]の値を指定すると、最初の横一行を読み込んだ時点で幅を決定して表示を開始をします。そのため、表示が速くなるというメリットがあります。

table-layoutプロパティに[fixed]を指定する場合には、必ず最初の行の各セルの幅を指定してください。最初の行よりも内容量が多いセルがあった場合、収まりきらずに不具合が生じる場合があります。

table-layoutに与えられる値

table-layout: auto;
通常通りの読み込みになります。これが初期値です。
table-layout: fixed;
最初の横一行を読み込んでから、各縦列の幅を決定して表示を開始します。

table-layoutの使用サンプル

CSS
.table_sample01 {
 table-layout: auto;
}
.table_sample02 {
 table-layout: fixed;
}
XHTML
<table class="table_sample01">
<tr>
<td>01</td><td>サンプル</td><td>サンプル</td></tr>
<tr>
<td>02</td><td>サンプル</td><td>サンプル</td></tr>
<tr>
<td>03</td><td>サンプル</td><td>サンプル</td></tr>
</table>

<table class="table_sample02">
<tr>
<td>01</td><td>サンプル</td><td>サンプル</td></tr>
<tr>
<td>02</td><td>サンプル</td><td>サンプル</td></tr>
<tr>
<td>03</td><td>サンプル</td><td>サンプル</td></tr>
</table>
表示確認

table-layoutに関連するCSSプロパティ

テーブル(table)関連
border-collapse テーブルセルのボーダーの表示の仕方を指定する
border-spacing テーブルセルのボーダーの間隔を指定する
caption-side テーブル(表)のキャプションの位置を指定する
empty-cells 空白セルのボーダーの表示・非表示を指定する
table-layout テーブルを描画する際のレンダリングアルゴリズムを指定する