にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

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

スタイルシートを使って表に線を引くには、「表そのものを作るtable要素」と「セルを構成するtd要素など」に枠線を引けば良いだけです。でも、そのままだと表の線が二重に見えてしまう問題があります。HTMLで作った表は、標準ではセルとセルの間に隙間ができる仕様なので、このように線が二重に描かれてしまいます。それを防ぐには、border-collapseプロパティを使います。

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

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

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

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

CSSソース

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

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

表の枠線の表示例1
セル11 セル12 セル13
セル21 セル22 セル23

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

表の枠線の表示例2
セル11 セル12 セル13
セル21 セル22 セル23

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

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

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

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

CSSソース

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

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

表の枠線の表示例3
セル11 セル12 セル13
セル21 セル22 セル23

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

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

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

CSSソース

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

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


()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---