border-collapse

web creators 11月号に気になる記事があった

統合ボーダーモデルでは、その名の通りボーダーが統合された状態で表示される。各ボーダーモデルはセル間を中心に表示されることになる。テーブル上下左右にはボーダーの半分がはみ出すので注意が必要だ。

今まで統合ボーダーモデルを選んだ時のtableにかかるborderはtableの外にかかるものだと思い込んでた（苦）気になったのでborder-collapseをcollapse（統合ボーダーモデル）、tableとtd,thのborderに1px solidのプロパティを与え、各ブラウザでどのように表示されるか調べてみた。

• Win Firefox...左に1pxはみ出す
• Win IE6...tableの内側に表示
• Mac Safari...右に1pxはみ出す
• Mac Firefox...左に1pxはみ出す

borderに1px以上のプロパティを与えてやるとWin IE6以外のブラウザは、ボーダーの半分がはみ出した。てな訳で本に書かれてたborder-collapseをseparate（分離モデル）にし、tableのborder-spacingプロパティを0、borderプロパティのright,bottomにそれぞれ値を、さらにWin IE用にHTML上tableタグのcellspacingプロパティを0、td,thのborderプロパティのleft,topにそれぞれ値を与えてあげるのが良いようだ。

メモとして一例を追記しておきます

※この記事は2006年10月3日にエントリーした内容です。2009年10月22日に新しい記事をエントリーしました。こちらも参考ください。

関連エントリー

border-collapseについて再度調査してみた

CSS Code

table.separateBox {
	border-collapse: separate;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	border-spacing: 0;
	background: #FFF;
	margin: 10px auto;
}
table.separateBox th,
table.separateBox td {
	border-top: 1px solid #666;
	border-left: 1px solid #666;
	padding: 2px 5px;
	line-height: 1.3;
}