tableのcellspacing="0"が必要なことはかなり多い。
しかし、これと同じことをしてくれるCSSのプロパティ、border-spacing:0 は、IE7以下では対応していない。そこで登場するのがborder-collapse:collapse なのだけれど、これにもまた問題がある。そんなこんなを解決するTips。やりたいのはcellspacing="0"を入れたくないってだけですが。

border-collapse:collapse

まずは、border-collapse:collapseにしたtableを見てみます。

<table>
    <tr>
        <td>border collapse</td>
        <td>border collapse</td>
        <td>border collapse</td>
    </tr>
</table>

table{
    width:100%;
    border-collapse:collapse;
    border-right:1px solid #333;
    border-bottom:1px solid #333;
}
td{
    border-top:1px solid #333;
    border-left:1px solid #333;
    padding:5px;
}

• border-collapse:collapseなサンプル

border-collapse:collapse を指定すると、隣り合うセルに指定されたborderはくっつく仕組みになります。こうすればcellspacing="0"とやらずともOKな気がしますが、よく見ると・・・

で、出ている！なぜ？（上のキャプチャはFirefox3.5）
これは、線を太くしてみるとよくわかります。

• border-collapse:collapseなサンプル – 線を太くしたもの

隣り合うborderがくっついて一つになるっていうことは、その線の中心はセルとセルのちょうど真ん中になってしまうんですよね。なので、1pxの線のtableであっても、ポコっと1px出ていて気になってしまうかもしれないです。これは、Firefoxだけそういうレンダリングをするっぽいです。他のブラウザはちゃんとtableを飛び出たりはしていませんでした。仕様の解釈の違いみたいなものがあるのかどうかは分からないですが、とにかく、Firefoxだと出ちゃうんです。

border-spacing:0

はて、最初にちらっと言った、border-spacing:0を試してみます。以下がサンプル。分かりやすくするため線は太いままです。

table{
    width:100%;
    border-spacing:0;
    border-collapse:separate; /* 何も指定しなくてもseparateですが一応 */
    border-right:8px solid #333;
    border-bottom:8px solid #333;
}
td{
    border-top:8px solid #333;
    border-left:8px solid #333;
    padding:5px;
}

• border-spacing:0なサンプル

上はFirefox3.5でのキャプチャ。これなら、セル同士の真ん中が中心になるわけではないので、意図したとおりになります。えーと、border-spacingに対応していないIE6,7以外を除いてはなんですけどね・・・下はIE7でのキャプチャ。

border-spacingには対応してないので無視されちゃいます。
なので、仕方ないから<table cellspacing="0">という風にするしかないか・・・ってことになってしまうんですね。

IE向けにはborder-collapse:collapse

初めのborder-collapse:collapseのところで、Firefoxだけ出てしまうと書きました。てことは、他のブラウザだったら、border-collapse:collapseにしても、tableの中に線が収まるわけで、tableを飛び越えたりはしないわけなんですよね。そして、border-spacing:0は、IE6,7がこれに対応していないだけで、他のブラウザでは問題なく利用できる。やりたいのは、tableにcellspacing="0"を付けたくないということ。これらをまとめて解決するために、こんな感じにしてみます。

table{
    width:100%;
    border-spacing:0;
    border-collapse:separate;
    *border-collapse:collapse; /* ie6,7 */
    border-right:8px solid #333;
    border-bottom:8px solid #333;
}
td{
    border-top:8px solid #333;
    border-left:8px solid #333;
    padding:5px;
}

基本はborder-spacing:0、IE6,7にだけはCSSハックでborder-collapse:collaseを。これで、幅が100%でも線が飛び出ません。

「Firefoxでは、セルのborderはtableの幅を超えてしまう」 これは仕様的に正しいのか？というのは、私には正確なところは分かりません。新しいブラウザでブレてるってことは、解釈が微妙なところということなんじゃないでしょうか？ それをどうこう頑張るのではなく、border-spacingに対応していない旧世代のブラウザであるIE6, 7に対して、同様の効果を得られる処理を行うことで、これを解決します。

なんかしら、ブラウザに起因するレンダリングの問題が発生しても、よーしじゃあSafari4のCSSハックは、Firefox3.5のハックはどうやってやるのかな！とか調べだすのではなく、古い方をどうにかする方向で考えた方がベターです。