表組以外の要素幅も均等にできる「table-layout: fixed」の便利な使い方

CSSの「table-layout: fixed;」プロパティの基本の使い方から、「display: table;」と組み合わせた実践的な使い方までご紹介します。

「table-layout: fixed;」を使うとなにができるのか、どう便利になるのか、実際の制作現場ではどのように使われているのか、というところまで掘り下げてご紹介していきます。

「table-layout」プロパティについて

<table>（表組）のレイアウトを指定するプロパティです。
表組に対して「table-layout」プロパティを指定することで、列の幅をどうしたいかを決めます。

下記のいずれかに対して指定することができます。

指定できる値

列幅をなりゆきにしたい場合は「auto」。
すべての列幅を均等に揃えたい場合は「fixed」を使います。

CSSの書き方

<table>要素の場合

table {
	table-layout: fixed;
}

「display: table;」プロパティを使用した要素の場合

div {
	display: table;
	table-layout: fixed;
}

「table-layout: fixed;」の使い方

基本の使い方

セルごとに文章量の違う表組を作ってみました。
「table-layout」プロパティを何も指定しない（初期値：autoと同様）とこのようになります。
列幅は、文章量が多い列が長くなり、少ない列が短くなっていますね。

では、この表組に「table-layout: fixed;」を指定してみます。

するとこのように、列幅が均等に分割されました。
列数がいくつあってもすべて均等幅になります。
表示している画面のサイズから自動で計算し、均等に列幅を調整してくれるのです。

一部の列幅だけ指定したい場合

すべての列幅を均等にするのではなく、一部だけ「○px」に固定して、残った列の幅を均等にすることもできます。

CSS

table {
	table-layout: fixed;
}
table th:first-of-type {
	width: 100px;
}

まず<table>要素に「table-layout: fixed;」を、1番目の<th>に「width: 100px;」を指定します。

デモ

1番目の<th>は「100px」で固定となり、残りの列は自動で均等幅に分割されました。

「table-layout: fixed;」の実践的な使い方

「table-layout: fixed;」の仕組みは理解できましたでしょうか。
このプロパティの便利なところは、ブラウザ側で自動で均等幅を計算してくれるということ。
この特性を利用すれば、Webサイトのさまざまなレイアウトに役立ちます。

Webサイトでよく使うパーツで、「table-layout: fixed;」を使うと捗る具体的な例をご紹介します。
Flexboxを使っても同じことができますが、HTML・CSSを覚えたての頃はこちらやり方がとっつきやすいと思います。

グローバルナビ

例えばよくあるこんなレイアウト。
「table-layout: fixed;」を使えば簡単にレイアウトできます。

HTML

<nav>
	<ul>
		<li>nav01</li>
		<li>nav02</li>
		<li>nav03</li>
		<li>nav04</li>
		<li>nav05</li>
	</ul>
</nav>

CSS

nav ul {
	display: table;
	table-layout: fixed;
}
nav ul li {
	display: table-cell;
}

「display: table;」でテーブル要素に変換する場合は、子要素に「display: table-cell;」の指定が必要。

デモ

画像とテキストの横並び

左側に画像、右側にテキストがある、よくみるレイアウトですね。

HTML

<div class="example">
	<div class="img">画像</div>
	<div class="txt">
		<h1>タイトル</h1>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>
</div>

CSS

.example {
	display: table;
	table-layout: fixed;
}
.example > div {
	display: table-cell;
}

デモ

ステップ（フロー）系

応募フローや、研修のステップなど、採用サイトの制作をしているとよくある項目です。

HTML

<ul class="example">
	<li>STEP.01</li>
	<li>STEP.02</li>
	<li>STEP.03</li>
	<li>STEP.04</li>
</ul>

CSS

.example {
	display: table;
	table-layout: fixed;
}
.example > li {
	display: table-cell;
	position: relative;
}
.example > li:not(:last-of-type)::after {
	content: "";
	display: block;
	border-style: solid;
	border-width: 15px 0 15px 10px;
	border-color: transparent transparent transparent #5f7c97;
	position: absolute;
	top: -webkit-calc(50% - 15px);
	top: calc(50% - 15px);
	left: 100%;
	z-index: 10;
}

デモ

「table-layout: fixed;」が効かない場合

「width」を指定していない

「table-layout: fixed;」プロパティを指定した要素に「width」の指定をしていない場合、うまく効きません。
何も指定していない場合と同じ挙動になってしまいます。

効かない場合は、「width」が指定されているかどうかを確認しましょう。

<table>要素の場合

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

「display: table;」プロパティを使用した要素の場合

div {
	width: 100%;
	display: table;
	table-layout: fixed;
}

表組の1行目に「colspan」がある

表組の1行目で「colspan」を使っている場合も、うまく効きません。
まずは下記をご覧ください。

1行目の、「見出し1」の内容が入るセルを「colspan」で連結しています。
よくある一般的な表組ですね。

table {
	table-layout: fixed;
}
table th {
	width: 100px;
}

「table-layout: fixed;」を指定した上で、「見出し」のセル幅をすべて「100px」に指定してみます。

するとなぜかこのようになってしまいました。
想定していたレイアウトと違いますよね。

「見出し1」と「見出し2」は100pxになっていますが、「見出し3」が違う幅になってしまっています。

解決方法

要するに、1行目に「colspan」がこなければ良いのです。
1行目の<tr>の前に、<colgroup>要素と<col>要素を使ってレイアウトします。

<table>
	<colgroup>
		<col class="th">
		<col>
		<col class="th">
		<col>
	</colgroup>
	<tr>
		<th>見出し1</th>
		<td colspan="3">内容</td>
	</tr>
	<tr>
		<th>見出し2</th>
		<td>内容</td>
		<th>見出し3</th>
		<td>内容</td>
	</tr>
</table>

このようにマークアップします。
見た目には一切影響ありません。

理想のレイアウトになりました。
すべての見出しが「100px」で統一されています。

まとめ

今回は「table-layout」の基本の使い方から実践的な使い方までご紹介しました。
table要素にすることで「vertical-align」も使えるようになりますし、レイアウトが楽になります。

Flexboxを使わなくても簡単にレイアウトできるので、初心者の方にはこちらのやり方がわかりやすいと思うので、是非ご参考ください。