シュウ

今回は【CSS】table-layoutの使い方、列幅のサイズについての解説になります！

こんな方に読んでほしい

• CSSを学び始めた方へ
• table-layoutの使い方について学びたい方へ
• 今回はtable(表)の列幅のサイズについての記事になります

上の図のように、table（表）を作成した際に、セルの領域は内容に応じて、列幅のサイズが自動調整されます。

table-layout: fixedを指定することにより、widthで指定されたセル以外の列幅は同じサイズに調整してくれます。

table-layoutについて

table-layoutプロパティは、テーブルのレイアウトアルゴリズムを指定します。
テーブルの列幅に関するルールが指定できます。
書き方は以下のようになります。

/*table-layoutの指定*/
要素 {
	table-layout: fixed;
	width: 値;
}

table-layout autoについて

table-layout: autoとは、セルの内容に応じて、列幅のサイズが自動調整されます。

thにクラス名「top」を指定し「見出し1、クマくん、サルくん」の列幅は100pxに指定しています。
見出し2、見出し3は自動でセルが内容に応じて、自動調整されています。

ここで1つ覚えておきたいプロパティ
border-collapse: collapseを指定すると、セル間のボーダーを空けずに、1つの線のように表示させてくれます。

<table class="layout-table01">
	<tbody>
		<tr>
			<th class="top">見出し1</th>
			<th>見出し2</th>
			<th>見出し3</th>
		</tr>
		<tr>
			<td>クマくん</td>
			<td>リンゴ</td>
			<td>1個120円(税込)</td>
		</tr>
		<tr>
			<td>サルくん</td>
			<td>バナナ</td>
			<td>1本140円(税込)</td>
		</tr>
	</tbody>
</table>

/*--table-layout: autoを指定--*/
table.layout-table01 {
	table-layout: auto;
	width: 100%;
	text-align: center;
}

table.layout-table01, 
table.layout-table01 td, 
table.layout-table01 th {
	border: solid 1px #fff;
	border-collapse: collapse;
}

th.top {
	width: 100px;
}

table.layout-table01 th {
	background-color: #fd6158;
}

table.layout-table01 td, 
table.layout-table01 th {
	padding: 10px;
	box-sizing: border-box;
} 

table-layout fixedについて

table-layout: fixedとは、widthで指定されたセル以外の列幅は同じサイズになります
※fixedを指定する際には、widthを必ず指定しましょう。

thにクラス名「top」を指定し「見出し1、クマくん、サルくん」の列幅は100pxに指定しています。
列幅(今回は例とて100px)を指定していない場合は、すべての列幅が均等になります。
見出し2、見出し3は均等に列幅を同じにしてくれます。

<table class="layout-table02">
	<!--以下省略-->
</table>

/*--table-layout: autoを指定--*/
table.layout-table02 {
	table-layout: fixed;
	width: 100%;
	text-align: center;
}

th.top {
	width: 100px;
}

/*--装飾 以下省略 上記と同じ　クラス名だけ変更--*/

table タグを覚えよう

tableタグはtr、tr、tdのタグを使用します。

tableの記事

【HTML table】表を作成からレイアウトの変更までを解説

tableの基本的な作成についての記事になります。

まとめ

今回はこれで以上です。

最新記事

• 

  【CSS】display flex指定方法のまとめを解説

  2024.03.07

• 

  【CSS】背景画像を複数設置について解説!

  2023.12.14

• 

  【CSS】疑似クラス、::afterと::beforeで斜めの背景を解説!!

  2023.06.22

• 

  【CSS】画像の透過について、mix-blend-modeを使ってみよう

  2023.06.01

関連記事

< 前の記事

【CSS】カーソルでテキストを選択した際のハイライト色を変更してみよう！

次の記事 >

【CSS】tableデザインとはCSSでレイアウトを整えよう！