今回は【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つの線のように表示させてくれます。
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
タグはtr
、tr
、td
のタグを使用します。
- 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に関する様々な情報を発信しています。
最新記事
関連記事