table-layout：表（テーブル）のレイアウトに使用されるアルゴリズムを指定する

table-layoutプロパティの説明

table-layoutは、表（テーブル）のレイアウトに使用されるアルゴリズムを指定します。ほとんどの場合は、ブラウザの既定値に従って自動的なレイアウトに任せるため、あまり使う機会がないかもしれませんが、行や列の多い巨大なテーブルやセルの中のデータが大きい場合に活用できる場面があります。

例えば、セルの中に入るデータが長い文字列の場合に、セルの寸法を制限して省略した内容を表示させたい場合などに有効です。

table-layoutに指定できる値

auto

ブラウザの自動的なレンダリングに任せます。これが既定値です。

fixed

表や列は最初のセルの幅、もしくは<table>や<col>に指定された幅によって固定され、後続する行のセルは幅に影響を与えません。この値は一行目が読み込まれた時点で表の全体がレンダリングできる状態になるため、既定値よりも高速に処理できます。ただし、後続するセルの内容が寸法に収まりきらない場合はレイアウトが崩れる可能性があります。そのため、固定値で描画する場合には、overflowプロパティを併記して溢れるコンテンツを制御しましょう。

table-layoutの使い方とサンプル

table-layoutプロパティの構文は以下の通りです。

/* キーワード値 */
table-layout: auto;
table-layout: fixed;

/* グローバル値 */
table-layout: inherit;
table-layout: initial;
table-layout: unset;

table-layoutの実例

それでは実際にtable-layoutプロパティの書き方を見ていきましょう。以下の例は、幅を固定した表に内容の溢れるセルが配置された時の比較です。table-layoutの値を変更すると、表の寸法に違いが現れます。更に、表の幅が固定された時にセルからはみ出すコンテンツをoverflowとtext-overflowによって制御しています。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box > div {
	margin-top: 1rem;
	padding: 1rem;
	background: #fff;
}
.samp_box table {
	width: 300px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-spacing: 0px;
	white-space: nowrap;
}
.samp_box table th {
	background-color: #ccc;
}
.samp_box table td {
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
#table_1 {
	table-layout: auto;
}
#table_2 {
	table-layout: fixed;
}
#table_3 {
	table-layout: fixed;
}
#table_3 td {
	overflow: hidden;
	text-overflow: ellipsis;
}

<section class="samp_box">
	<div>
		<table id="table_1">
			<caption>table-layout: auto;</caption>
			<tr>
				<th>TH A</th>
				<th>TH B</th>
				<th>TH C</th>
			</tr>
			<tr>
				<td>A1</td>
				<td>B1</td>
				<td>C1</td>
			</tr>
			<tr>
				<td>A2:ABCD</td>
				<td>B2:ABCDEFG</td>
				<td>C2:ABCDEFGHIJK</td>
			</tr>
			<tr>
				<td>A3:123</td>
				<td>B3:123456</td>
				<td>C3:1234567890</td>
			</tr>
		</table>
	</div>
	<div>
		<table id="table_2">
			<caption>table-layout: fixed;</caption>
			<tr>
				<th>TH A</th>
				<th>TH B</th>
				<th>TH C</th>
			</tr>
			<tr>
				<td>A1</td>
				<td>B1</td>
				<td>C1</td>
			</tr>
			<tr>
				<td>A2:ABCD</td>
				<td>B2:ABCDEFG</td>
				<td>C2:ABCDEFGHIJK</td>
			</tr>
			<tr>
				<td>A3:123</td>
				<td>B3:123456</td>
				<td>C3:1234567890</td>
			</tr>
		</table>
	</div>
	<div>
		<table id="table_3">
			<caption>table-layout: fixed;</caption>
			<tr>
				<th>TH A</th>
				<th>TH B</th>
				<th>TH C</th>
			</tr>
			<tr>
				<td>A1</td>
				<td>B1</td>
				<td>C1</td>
			</tr>
			<tr>
				<td>A2:ABCD</td>
				<td>B2:ABCDEFG</td>
				<td>C2:ABCDEFGHIJK</td>
			</tr>
			<tr>
				<td>A3:123</td>
				<td>B3:123456</td>
				<td>C3:1234567890</td>
			</tr>
		</table>
	</div>
</section>