表の線が二重になる？border-collapseとborder-spacingを切り替えよう

表のセルに線を付けたら、隣り合う線が二重に見える。セル同士のすき間を変えても、効かない場合もある。表の枠線をまとめるか分けるかを決めるborder-collapseを確認しよう。

目標は、二つの枠線モデルと、border-spacingが働く条件を区別すること。記事下の作例はブラウザだけで試せる、架空の二列の表だよ。

separateは、セルごとの線を分ける

table {
  border-collapse: separate;
  border-spacing: 12px;
}
th, td {
  border: 2px solid #5445df;
}

separateでは、セルごとに枠線を持つ。border-spacingでセル間の間隔を指定できるよ。今回の12pxは表の間隔で、セルの内側の余白を指定するpaddingとは別だね。

border-spacingは表の外側の端にも関係する。セルの内容から表の端までの距離を、単純に「セル間の数だけ」と考えないようにしよう。

collapseは、隣の線をまとめる

table {
  border-collapse: collapse;
  border-spacing: 12px;
}

collapseでは、隣り合うセルの枠線を共有するモデルになる。この状態ではborder-spacingを書いても、セルを12pxずつ離す指定としては働かないよ。

複数の線の太さや種類がぶつかった場合には、どの線を使うかの規則もある。今回は同じ太さ・同じ色の線で、まずモデルの違いに絞って比べよう。

同じ表で、切り替えてみよう

1. separateと間隔12pxを選ぶ。セルの間に背景が見えることを確認する。
2. 間隔を0px、24pxへ変える。間隔の変化を見る。
3. collapseへ切り替える。同じ24pxを指定しても、セル間が広がらないことを確かめる。
4. 「最初から試す」でseparate・12pxへ戻す。

作例は上の行の二つのセルの位置から、横方向のすき間を測って表示する。枠線の見た目だけでなく、どの指定が間隔へ影響したかも読めるよ。

間隔が変わらないときの確認

まずtable自体にborder-collapseが適用されているか確認する。別のスタイルでcollapseへ上書きされていれば、border-spacingだけを増やしても期待した間隔にはならない。

次に、広げたい場所がセル同士なのか、セルの文字と線の間なのかを分けよう。後者なら、見直すのはpadding。表全体と周囲の文章との距離なら、表のmarginなど別の指定になるよ。

見た目と、表の意味を両方確かめる

編集部ではChromiumでseparateとcollapse、三つの間隔、リセットを確認した。実際の表では、長い文字や画面幅を変えた状態も確かめたいね。

列や行の意味を伝える見出しは、線だけでは代わりにならない。caption・th・tdの基本も合わせて確認しよう。