表
table-layout
table-layout は、表の列の幅を、セルの中身を見て決めるか、表の幅と 1 行目のセルだけで決めるかを指定します。
構文
auto | fixedプレビュー
| 個数 | |
|---|---|
| りんご（ふじ） | 3 |
| みかん | 5 |
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
table-layout: fixed;
}コントロール
table-layoutfixed
| 個数 | |
|---|---|
| りんご（ふじ） | 3 |
| みかん | 5 |
解説
値の意味
auto：初期値です。すべてのセルの中身を見て列の幅を決めます。長い中身のある列ほど広くなります。fixed：セルの中身を見ずに、表の幅と、列（col要素）や 1 行目のセルに指定した幅だけで列の幅を決めます。幅を指定していない列は、残りの幅を等分します。中身が列に収まらないときは、折り返すか、はみ出します。
fixed では 1 行目だけで列の幅が決まるので、行の多い表でも、すべての行を見る前に列の幅が決まります。
気をつけること
fixedが効くのは、表のwidthがautoとmax-content以外のときだけです。幅を決めていない表ではautoと同じになります。- 継承しないプロパティなので、
table要素に書きます。
このページのプレビューでは、箱の中の表を箱の幅いっぱい（width: 100%）に広げ、表に inherit を指定して箱に書いた値を受け取らせています。1 列目に長い名前を入れているので、auto では 1 列目が広がり、fixed では 2 列が同じ幅になって名前が折り返します。