tableの枠線にborder-radiusを適用する時の注意

Tweet

Share on Tumblr

tableの枠線にborder-radiusを適用する時に、ちょっと苦労したのでメモ。

<table>
<tr><th>ブラウザ</th><th>開発元</th></tr>
<tr><td>Internet Explorer</td><td>マイクロソフト</td></tr>
<tr><td>Google Chrome</td><td>Google Inc.</td></tr>
<tr><td>Mozilla Firefox</td><td>Mozilla Foundation</td></tr>
</table>

こんなテーブルがある場合。

table {
	border-collapse:collapse;
	border:1px solid #000;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

と書いてみても、枠線の角は丸くならなかった。

原因は
border-collapse:collapse;
の部分でした。

どうも、
border-collapse:separate;
でないと、テーブルにはborder-radiusが適用されないようで。

というわけで、以下の様に直してみたら問題なく枠線の角が丸くなりました。

table {
	border-collapse:separate;
	border:1px solid #000;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}