「テーブルが崩れる！」を卒業しよう。CSSの `table-layout` でレイアウトを意のままに操る方法
Web制作を始めたばかりの頃、誰もが一度は「テーブル（表）」の扱いに頭を抱える瞬間がありますよね。
「中身の文字数によって列の幅が勝手に変わってしまう」「スマホで見ると表示がガタガタになる」……そんな経験はありませんか？実はそれ、HTMLのせいではなく、CSSの `table-layout` というプロパティの性格を知るだけで、驚くほどスッキリ解決できるんです。
今日は、テーブルレイアウトの「自動（auto）」と「固定（fixed）」という2つの性格について、身近な例えを交えながら紐解いていきましょう。
—
1. そもそも、テーブルの「標準」はどうなっているの？
HTMLでテーブルを作ったとき、特に何も指定しないとブラウザは「`table-layout: auto;`」という設定で動きます。
これは例えるなら「行列ができる人気ラーメン店の席案内」のようなもの。
お客さん（中身の文字数）が多ければ多いほど、その列を広げようと頑張ります。全体を見て「あ、この列は文字が長いから幅を広げてあげよう」と、ブラウザが気を利かせて計算してくれるわけです。
しかし、この「気を利かせすぎ」が、時にアダとなります。
- 中身の文字数で列幅がバラバラになり、見た目が揃わない。
- 画面幅が狭くなると、計算し直すためにレンダリング（表示処理）が遅くなる。
「便利だけど、思い通りにはいかない」のが `auto` の正体です。
—
2. 救世主 `table-layout: fixed;` の登場
ここで登場するのが `table-layout: fixed;` です。これは「厳格な指定席制の会議室」だと想像してください。
「このテーブルは幅を300pxにする」「列は均等に分ける」とCSSで最初にルールを決めておけば、中身がどれだけ長くても、そのルールを頑として守ります。
なぜ `fixed` を使うべきなのか？
最大のメリットは、レンダリング速度が速いことです。
ブラウザは「あ、今回は中身を見なくていいんだな。指定された幅で描画すればいいんだ！」と判断できるので、ページを表示するまでの処理が非常にスムーズになります。特にデータ量の多いテーブルでは、この差が体感できるほど違ってきます。
—
3. 実践！コードで見てみよう
それでは、実際に比較してみましょう。エディタにコピペして、ブラウザで動かしてみてくださいね。
1. table-layout: auto (デフォルト)
| 名前 | 詳細 |
|---|---|
| 佐藤 | 短い文章 |
| 鈴木 | ここでは文字数が多いと、この列だけがグイッと横に広がってしまいます。 |
2. table-layout: fixed (固定)
| 名前 | 詳細 |
|---|---|
| 佐藤 | どれだけ長い文章が入っても、この枠からはみ出さず、改行されて収まります。 |
—
4. つまずきポイントをフォロー
「`fixed` にすると、文字が枠を突き抜けていってしまう！」と焦る方がよくいらっしゃいます。大丈夫です、落ち着いてくださいね。
`fixed` を使ったときは、枠からはみ出そうとする文字に対して、CSSで以下の工夫をしてあげるのがお作法です。
td {
overflow: hidden; / はみ出した分は隠す /
text-overflow: ellipsis; / はみ出した分を「…」にする /
white-space: nowrap; / 改行を禁止する /
}
これを追加するだけで、プロのような整ったデザインのテーブルが簡単に作れるようになりますよ。
—
最後に：どちらを使うべき？
結論を言うと、基本は `table-layout: fixed;` をおすすめします。
- `fixed` が向いているもの： データの管理画面、比較表、価格表など、デザインを崩したくない場面。
- `auto` が向いているもの： ブログ記事内の小さな表や、中身の量が予測できない流動的なコンテンツ。
テーブルは「データを見やすく整理する」ための道具です。ブラウザ任せにするのではなく、私たちがルールを決めてあげることで、グッと読みやすく、かつ爆速で表示されるWebサイトが作れるようになります。
最初は難しく感じるかもしれませんが、まずは `table-layout: fixed;` を1行追加するところから始めてみてください。きっと「なるほど、こういうことか！」と直感的に理解できるはずですよ。
それでは、素敵なコーディングライフを！
コメント