HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

テーブル レイアウト

table-layoutプロパティ

テーブルの表組みにおいて、列幅の取り方を指定するプロパティです。

  • 初期値

    auto

  • 継承

    不可

  • 適用できる要素

    テーブル要素、インラインテーブル要素

次の値を指定することができます。

  • auto – セル内容によって自動的に列幅を調整。初期値
  • fixed – 列幅をwidthプロパティで指定した値にする。指定のないセルについては幅を均等に自動調整。

パターン1

値に「auto」(初期値)を指定している例です。widthプロパティを指定しているセルはその幅が適用され、それ以外のセルは内容に応じて自動的に幅が調整されます。

CSSコード例

<style>
.table1 {
	table-layout: auto;
}
.table1 .product_name {
	width: 40%;
}
</style>
<table class="table1">
	<tr>
		<th class="product_name">商品名</th>
		<th class="product_num">在庫数</th>
		<th class="product_price">価格</th>
	</tr>
	<tr>
		<td>ミネラルウォーター</td>
		<td>150本</td>
		<td>100円(税抜)</td>
	</tr>
	<tr>
		<td>コーラ</td>
		<td>100本</td>
		<td>140円(税抜)</td>
	</tr>
	<tr>
		<td>お茶</td>
		<td>200本</td>
		<td>130円(税抜)</td>
	</tr>
	<tr>
		<td>レモンティー</td>
		<td>100本</td>
		<td>120円(税抜)</td>
	</tr>
</table>

表示例:


パターン2

値に「fixed」を指定している例です。widthプロパティを指定しているセルはその幅が適用され、それ以外のセルは残ったテーブルの幅を均等に割った幅が適用されます。

CSSコード例

<style>
.table2 {
	table-layout: fixed;
}
.table2 .product_name {
	width: 40%;
}
</style>
<table class="table2">
	<tr>
		<th class="product_name">商品名</th>
		<th class="product_num">在庫数</th>
		<th class="product_price">価格</th>
	</tr>
	<tr>
		<td>ミネラルウォーター</td>
		<td>150本</td>
		<td>100円(税抜)</td>
	</tr>
	<tr>
		<td>コーラ</td>
		<td>100本</td>
		<td>140円(税抜)</td>
	</tr>
	<tr>
		<td>お茶</td>
		<td>200本</td>
		<td>130円(税抜)</td>
	</tr>
	<tr>
		<td>レモンティー</td>
		<td>100本</td>
		<td>120円(税抜)</td>
	</tr>
</table>

表示例: