table-layout

table-layoutは、テーブル列幅の表示方法を指定するスタイルです。

解説

テーブルの列幅を自動レイアウトまたは固定レイアウトに指定します。
（自動レイアウトが初期値です。）

自動レイアウトではセルの値によって列幅が自動調整されます。
固定レイアウトではセルの値に関わらず、均等な列幅になります。

table-layout指定時のテーブル幅は「width:100%」のように可変となるような指定が必要です。

構文

構文は以下になります。

値

table-layoutには以下の値が指定できます。

サンプル

列幅を自動レイアウトにする

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

<table class="sample01">
  <tr><td>ねこ</td><td>たぬき</td><td>チンパンジー</td></tr>
</table>

値によって列幅が異なります。

列幅を固定レイアウトにする

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

<table class="sample02">
  <tr><td>ねこ</td><td>たぬき</td><td>チンパンジー</td></tr>
</table>

値が異なっても列幅は同じサイズです。

備考

• 自動レイアウト（auto）の場合は、table-layoutの明示的な指定は不要です。

Tweet