SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
技術者募集中

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

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;
}

関連するメモ

コメント