Firefoxでのテーブルボーダー1pxのズレを無くす方法

tableにborderを付ける時、border-collapseを使って隣接するセルのボーダーを重ねると思いますが、この方法だとFirefoxではtableのサイズが1pxはみ出すのです。

border-collapseを使ったテーブル

Firefoxで見ると左のボーダーが1pxズレているはず。IE、Safari、Chrome、Operaなどは指定した幅の通りになっています。

 
<table>
    <tr>
        <td>AAAAAAAAAAAAAA</td>
        <td>BBBBBBBBBBBBBB</td>
    </tr>
    <tr>
        <td>CCCCCCCCCCCCCC</td>
        <td>DDDDDDDDDDDDDD</td>
    </tr>
</table>
 

 
table {
    width: 350px;
    border-collapse: collapse;
}
td {
    border: 1px solid #333333;
}
 

1pxはみ出すサンプル

border-spacingを使って解決

まず、collapseを指定するとFirefoxではみ出てしまうのでseparateに変更し、border-spacingでセルのボーダーの間隔を0にします。ただし、IEはborder-spacingには対応していないのでtableのcellspacing属性を代用します。

 
<table cellspacing="0">
    <tr>
        <td>AAAAAAAAAAAAAA</td>
        <td>BBBBBBBBBBBBBB</td>
    </tr>
    <tr>
        <td>CCCCCCCCCCCCCC</td>
        <td>DDDDDDDDDDDDDD</td>
    </tr>
</table>
 

 
table {
    border-top: 1px solid #333333;
    border-left: 1px solid #333333;
    border-collapse: separate;
    border-spacing: 0;
}
 
td {
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
}
 
 

解消したサンプル