スタイルシートで表に枠線を引くと線が二重に見えるのを避ける方法

HTMLで表(テーブル)を書いたとき、表の内側や外側に線を引きたいと思うことがありますよね。スタイルシートを使って表に線を引く方法は、その他のボックスなどに線を引く場合と同じで、枠線を引くためのborderプロパティを書けば良いだけです。

• 表全体を構成するtable要素に対して枠線(border)を引けば、表の外側に線が引けます。
• 表のセルを構成するth要素やtd要素に対して枠線(border)を引けば、表の内側に線が引けます。

ですから、表の外にも内にも線を引きたいなら、table要素とtd要素(th要素)の両方に枠線を引けば良いわけです。例えば以下のCSSソースのように。

table, th, td {
   border: 1px solid blue;
}

しかし、上記のCSSソースだと表の線が二重に見えてしまう問題があります。例えば以下の表示例(上記のCSSソースを適用)では、table要素とtd要素の双方に「幅1pxで緑色の実線」を引いています。枠線は1本しか指定していないのですが、表示結果を見ると線は二重に見えてしまいます。

このように、表の内部にある1つ1つのセルに2重に枠線が引かれているように見えます。なぜこのような二重に見えてしまうのかは、以下のように枠線の色を分けてみると分かりやすいでしょう。

上記では、table要素に対する枠線は青色で、td要素に対する枠線は赤色で表示しています。こうするとよく分かると思います。
要するに、「表の外側の枠線」(青色)のほかに、1つ1つのセルそれぞれに対して「セルを囲む枠線」(赤色)が表示されるのが原因です。隣同士のセル1つ1つに別の枠線が存在するため、セルとセルの間に2本の枠線が表示されることになってしまいます。

このような線の引き方は、あまり「表」としてはスタンダードではありませんよね。その解決策はちゃんとスタイルシートに用意されています。

隣り合う枠線を重ねて1本にするborder-collapseプロパティ

表に引いた線が二重に見えないようにするために使うのが、border-collapseプロパティです。このプロパティは、「隣り合う枠線を重ねる」ために使えるプロパティです。このプロパティは以下のように記述して使います。

table {
   border-collapse: collapse; /* 隣り合うセルの線を結合 */
   border: 2px solid blue;    /* 外側は青色の実線2px */
}
td {
   border: 1px solid blue;    /* 内側は青色の実線1px */
}

table要素に対してborder-collapseプロパティの値に「collapse」を指定するだけです。これによって、その表(table)内部のすべてのセル(th要素やtd要素など)の「隣り合う枠線」が重なって1本になります。すると、下記のように線が二重に見えることなく美しく表を見せることができます。

上記の表は、隣り合う枠線が重なった結果、表を構成する線が1本になり「表らしく」見えているはずです。このように、border-collapseプロパティは、表を装飾する際に必須の記述だと言えるでしょう。

備考：border-collapseプロパティの標準値は「separate」

ちなみに、border-collapseプロパティのデフォルトの値は「separate」です。これを指定すると、隣り合う枠線は重ならずに離れて表示されます。何も指定しなければseparateだと解釈されるので、普段記述することはないでしょう。しかし、ページ全体にcollapseが適用されているような状況で、一カ所だけseparateにしたい場合などには記述する機会もあるかも知れません。

table {
   border-collapse: separate;  /* 枠線を結合しない */
}

なお、ものすごく古いブラウザ(IE5以下など)ではborder-collapseプロパティには対応していないのですが、まあ、もはやそんな太古のバージョンを気にする必要性はないでしょうね。(^_^;)

(更新日：2017年07月02日)