border-collapse:collapse;にするべきか separateにするべきか

Tweet

Category css 2009/11/18

HTMLにて、tableに下記のスタイルを指定すると、CSSの見た感じがわかりやすく簡単で、レンダリングもきれいにできているように見えます。

table {border-collapse:collapse;}
td, th {border:1px solid #000000;}

border-collapse:collapse; の指定は、境界線の共有。

1pxの境界線を共有するということは、計算上隣接するセル同士で0.5pxずつ受け持つことになります。

この指定によって、Firefoxで上の境界線、左の境界線が消える、期待する位置から1pxずれるといった問題が発生します。

★ ★ ★ こちらをおすすめします。 ★ ★ ★（IE6非対応。CSSハック入りは下に追記。）

table {
	border-collapse: separate;
	border-spacing:0;
	empty-cells:show;
	border-top:1px solid #000000;
	border-right:none;
	border-bottom:none;
	border-left:1px solid #000000;
}
th, td {
	border-top:none;
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;
	border-left:none;
}

上と左のボーダーを外側のtableが担当し、
右と下のボーダーを中のセル（td,th）で担当します。

table に、上下左右に全部の線を入れたい場合には、スタイルシートの指定がシンプルに見えますが、縦の線がいらないとき（ノートの罫線のように横向きの線のみ）も当然あります。
横向きの線を実線で、縦向きの線を点線で描くこともあります。

最初にあげた collapse の指定方法は、「田」の字のように境界線を描きたいときは簡単に見えますが、「三」の字や「日」の字、「井」の字に境界線を入れたいときは、結局、外枠とセルでそれぞれ上下左右のボーダーをうまく指定する必要が出てきます。

外枠のtableと、中のtdで手分けしてボーダーを描けば、

1. 線が消えるなどのトラブルがない（Firefoxで特に）
2. スタイルシートがわかりやすい（上下左右、指定した通りの表示）
3. いろんな境界線が簡単に指定できる（もともと上下左右全部指定しているので）

＜追記＞
・IE6でempty-cellsが効かない → 空のセルには&#nbsp;や<br />を入れておかないとボーダーが表示されない。
・IEでやっぱり変 → border-spacing:0 は、IE7以下では対応していない。tableにcellspacing=”0″を指定すれば表示は直るが、それは書きたくない。→こうですか……

table {
	border-collapse: separate;
	*border-collapse:collapse; /* for IE6,7 */
	border-spacing:0;
	empty-cells:show;
	border-top:1px solid #000000;
	border-right:none;
	border-bottom:none;
	border-left:1px solid #000000;
}
th, td {
	border-top:none;
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;
	border-left:none;
}