tableタグに関する基本あれこれ備忘録

CSS

2015年12月12日2021年09月17日

（この記事は2017年11月14日に修正・加筆しました）

コーディングの際
会社概要や沿革などのレイアウトにtableタグを使う機会が多々ありますが、
基本的なことがあやふやで毎回同じこと調べてるので
自分用にtable備忘録を作成しました。

セルの罫線をくっつけたい＝border-collapseで設定
セルに対する設定は、th・tdに
thを上揃え・左揃えにする。
セルの結合
スマホで横幅がはみ出すとき
まとめ

セルの罫線をくっつけたい＝border-collapseで設定

table{
    border-collapse: collapse; /* くっつける */
    border-collapse: separate; /* すき間を空ける */
}

table{

border-collapse: collapse; /* くっつける */

border-collapse: separate; /* すき間を空ける */

}

ちなみに、Firefoxでcollapseの設定をしたところ
borderが消えてしまうという現象を見たことがあります（Firefoxのバグ？）。

以下のコードで改善したので、同じ現象が見られている方はお試しください。

table{
	/* border-collapse: collapse; ←これだとborderが消えてしまう */
	border-collapse: separate;
	border-spacing: 0;
}

table{

/* border-collapse: collapse; ←これだとborderが消えてしまう */

border-collapse: separate;

border-spacing: 0;

}

セルに対する設定は、th・tdに

borderや背景など、ついtrに設定しがちですが、trに設定しても効きません。
直接セルに指定します。

thを上揃え・左揃えにする。

thはデフォルトでは、縦・横とも真ん中揃えになっていますが
スタンダード（？）の上揃え・左揃えにするには下の設定を。

table th{
	vertical-align: top; /* 上揃えにする */
	text-align: left; /* 左揃えにする */
}

table th{

vertical-align: top; /* 上揃えにする */

text-align: left; /* 左揃えにする */

}

セルの結合

縦結合と横結合、
いつもどっちがどっちかわからなくなるんですよねー。

<table>
 <tbody>
  <tr>
   <th rowspan="3">縦3マス結合</th>
   <th>縦１</th>
   <td>あああ</td>
   <td>いいい</td>
  </tr>
  <tr>
   <th>縦２</th>
   <td colspan="2">横2マス結合</td>
  </tr>
  <tr>
   <th>縦３</th>
   <td>さささ</td>
   <td>ししし</td>
  </tr>
 </tbody>
</table>

<table>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

このような記述で、以下のような表示になります。
縦結合はrowspan
横結合はcolspan
です。

縦3マス結合	縦１	あああ	いいい
	縦２	横2マス結合
	縦３	さささ	ししし

検索するとテーブルのジェネレーターなんかもあるので、
使ってみると効率化に良いかもです。
Table Tag Generator

スマホで横幅がはみ出すとき

box-sizing: border-box; + width: 100%;を指定しても
ディスプレイ幅よりはみ出していることがあります。
そんな時は、

table{
    table-layout: fixed;
    width: 100%;
}

table{

table-layout: fixed;

width: 100%;

}

table-layout: fixed;を付与すると
しっくり100%に収まります。

まとめ

以上、初歩的なことからレスポンシブ対応まで
基本的なことをまとめました。

応用編もありますので、よかったら合わせてどうぞ。
tableタグに関するあれこれ備忘録【応用編】｜nico MEMO