テーブルのセル間の境界線を重ねる方法

通常、テーブルのセル間は離れて表示されますが、CSSを使って境界線を重ねて表示させる方法です。
HTMLのtable要素のboder属性を「border="0"」とした時の表示と同じです。

CSS記述方法

 
table {
    border-collapse: collapse;
    width: 400px;
    border: 1px solid #336699;
    background: #EEEEFF;
}
 
th,td {
    border: 1px solid #336699;
    padding: 2px;
	text-align: center;
}
 
th {
    background: #DDDDEE;
}
 

HTML記述方法

 
<table>
    <tr>
        <th>&nbsp;</th>
        <th>Atype</th>
        <th>Btype</th>
    </tr>
    <tr>
        <th>項目1</th>
        <td>505</td>
        <td>800</td>
    </tr>
    <tr>
        <th>項目2</th>
        <td>250</td>
        <td>150</td>
    </tr>
    <tr>
        <th>項目3</th>
        <td>300</td>
        <td>500</td>
    </tr>
</table>
 

→テーブルのセルの境界線を重ねるサンプル

「border-collapse:collapse;」とすると、境界線は重ねて表示されます。
MacIEだと重ならずにそのまま表示されてしまいますが、テーブルが崩れるわけではないので問題ありません。それにMacIEで見る人少ないし。。。
どうしても気になるという人はtable要素にcellspacing="1"を付けて、そのtableに背景色を付ければ、境界線を引いた感じになりますので、お試しを。