SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.08.04
  • CATEGORY
TITLE

【CSS】table-layoutの使い方、列幅のサイズについて

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

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

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

table-layoutについて

table-layoutについて

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

/*table-layoutの指定*/
要素 {
	table-layout: fixed;
	width: 値;
}
指定できる値
  • auto(初期値)
    セルの内容に応じて、列幅のサイズが自動調整
  • fixed
    widthで指定されたセル以外の列幅は同じサイズになります
    ※fixedを指定する際には、widthを必ず指定しましょう。

table-layout autoについて

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

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

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

autoについて

見出し1見出し2見出し3
クマくんリンゴ1個120円(税込)
サルくんバナナ1本140円(税込)
<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は均等に列幅を同じにしてくれます。

fixedについて

見出し1見出し2見出し3
クマくんリンゴ1個120円(税込)
サルくんバナナ1本140円(税込)
<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タグはtrtrtdのタグを使用します。

tableタグの説明
  • table: 表全体を囲むときに使用します。
  • tr: 「Table Row(行)」の略。
    表を囲むときに使用します。
  • th: 「Table Header(見出し)の略。
    表の見出しとして使用します。
  • td: 「Table Data(データ)」の略。
    表のデータとして使用します。
tableの記事

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

まとめ

今回はこれで以上です。

POINT
  • autoとは、セルの内容に応じて、列幅のサイズが自動調整してくれます。
  • fixedとは、widthで指定されたセル以外の列幅は同じサイズになります。
  • fixedを指定する際には、widthを必ず指定しましょう。
  • border-collapse: collapseを指定すると、セル間のボーダーを空けずに、1つの線のように表示させてくれます。
  • tableタグをしっかり理解しておきましょう。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top