tableタグの枠線(ボーダー)のマークアップメモ

よくない例。

table {
 border-left:1px solid #ccc;
 border-bottom:1px solid #ccc;
}
table th,td {
 border-top:1px solid #ccc;
 border-right:1px solid #ccc;
}

thとtdに対して｢border:1px solid black｣ってやるとボーダーが二重に描画されるので、こういうHack(笑)をしていた。

が、もっとスマートな方法があった。

[使える CSS テクニック]CSSを使った見栄えの良い表組み（table） | バシャログ。

table {
 border:1px solid #f1f1f1;
 border-collapse: collapse;
}
table th,td {
border:1px solid #f1f1f1; 
}

｢border-collapse: collapse;｣を指定することで、勝手に重複を排除してくれるようです。勉強になりました。