読者です 読者をやめる 読者になる 読者になる

Life is Really Short, Have Your Life!!

ござ先輩の主に技術的なメモ

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;」を指定することで、勝手に重複を排除してくれるようです。勉強になりました。