CSS3スタイル虎の巻

table-layout

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

解説

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

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

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

構文

構文は以下になります。

table-layout:値

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

説明
auto列幅を自動レイアウトにする
(セルの値によって列幅が自動調整されます)
(例)table-layout:auto;
fixed列幅を固定レイアウトにする
(均等な列幅になります)
(例)table-layout:fixed;

サンプル

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


.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の明示的な指定は不要です。