CSS

The 'table-layout' property is a CSS property used to specify the way a table adjusts its width and column widths. Using the 'auto' value will adjust them automatically, while using the 'fixed' value will fix their widths.

table-layout プロパティ

　table-layoutプロパティは、テーブルのレイアウトを制御するために使用されます。このプロパティは、テーブルの自動レイアウトアルゴリズムを制御するために使用されます。

　table-layoutプロパティには、２つの値があります。auto と fixed です。いずれの場合も行の高さは自動的に算出されます。

auto

table-layoutプロパティのデフォルト値は auto です。この場合、ブラウザはテーブル幅を自動的に調整し、セルの内容に基づいて列の幅を調整します。これにより、テーブルの幅はセルの幅に合わせて伸縮します。

ただし、テーブル内の長いテキストや画像がある場合は、列の幅が不均一になるため、テーブルの見た目が乱れる可能性があります。

fixed

table-layoutプロパティの値を fixedに設定すると、テーブルの幅が指定された値になり、セルの内容に関係がなく、列の幅が一定になります。これにより、テーブル内の長いテキストや画像があっても、列の幅が均一になるため、テーブルの見た目が統一されます。

この場合、列の幅は、テーブルの幅を均等に分配するため、指定された幅に収まるように調整されます。ただし、テキストや画像が幅を超える場合は、列の幅が指定された幅を超えることがあります。

　どちらの値を選択するかは、テーブルの内容に合わせて決定する必要があります。ただし、可能であれば、fixed値を使用して、テーブル内の要素が均等に配置されるようにすることをお勧めします。

　このプロパティは、以下のように使用されます。

table {
	table-layout: value;
}

　ここで、valueには autoまたは fixedのいずれかが指定されます。例えば、テーブルの幅を固定したい場合は、次のように指定します。

table {
	table-layout: fixed;
}

　この設定により、テーブルの幅が指定された値になり、テーブルの列の幅は固定されます。ただし、列の幅はテキストの長さによって変化する可能性があるため、テーブルの内容が見切れる可能性があります。

　一方、以下のように autoを指定すると、テーブルの幅が自動的に決定されます。

table {
	table-layout: auto;
}

　この設定により、テーブルの幅が自動的に決定され、テーブルの列の幅は内容に合わせて自動的に調整されます。しかし、列の幅が異なるため、テーブルの行の高さが一定ではなく、テーブル全体が不均一に見える場合があります。

　以下の点に留意して、table-layoutプロパティを使用してください。

• table-layoutプロパティは、テーブル要素に対して適用されるため、td要素や th要素には適用されません。
• fixed値を使用する場合は、各列の幅を col要素で指定することをお勧めします。この場合、col要素の幅はパーセンテージまたはピクセル単位で指定できます。
• fixed値を使用して列の幅を固定することができますが、内容がはみ出す可能性があるため、適切な幅を指定する必要があります。
• table-layoutプロパティの設定によって、テーブルのレンダリングに影響を与える可能性があるため、必要に応じてページ全体のレイアウトを調整する必要があります。

　つまり、table-layoutプロパティは、テーブルのレイアウトを調整する際に非常に有用なプロパティです。それぞれの値がどのように動作するか理解し、適切に使用することで、テーブルの外観を改善できます。

　初期値の autoでは、ブラウザはテーブル全体を読み込んでから、セル内容に合わせて各列の幅を決定して表示を開始しますが、fixedを指定すると、最初の一行目を読み込んだ時点で各列の幅を固定して表示を開始するため、表示が速くなるメリットがあります。

Sample

　以下の例を見て、table-layoutプロパティの使い方を理解しましょう。この例では、table-layoutプロパティを autoと fixedの両方で設定した場合のテーブルを表示しています。

.auto-table {
	table-layout: auto;
}

.fixed-table {
	table-layout: fixed;
}

col:nth-of-type(1) {
	width: 20%;
}

col:nth-of-type(2) {
	width: 30%;
}

col:nth-of-type(3) {
	width: 50%;
}

td {
	padding: 5px;
	border: 3px solid darkblue;
}

<table class="auto-table">
	<tr>
		<td>Apple</td>
		<td>Orange</td>
		<td>Banana</td>
	</tr>
	<tr>
		<td>Cherry</td>
		<td>Grapes</td>
		<td>Pineapple</td>
	</tr>
	<tr>
		<td>Watermelon</td>
		<td colspan="2">Strawberry</td>
	</tr>
</table>

<table class="fixed-table">
	<col>
	<col>
	<col>
	<tr>
		<td>Apple</td>
		<td>Orange</td>
		<td>Banana</td>
	</tr>
	<tr>
		<td>Cherry</td>
		<td>Grapes</td>
		<td>Pineapple</td>
	</tr>
	<tr>
		<td>Watermelon</td>
		<td colspan="2">Strawberry</td>
	</tr>
</table>

Browser support