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


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;
}

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

ブラウザ 開発元
Internet Explorer マイクロソフト
Google Chrome Google Inc.
Mozilla Firefox Mozilla Foundation

原因は
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;
}
ブラウザ 開発元
Internet Explorer マイクロソフト
Google Chrome Google Inc.
Mozilla Firefox Mozilla Foundation

tableの枠線にborder-radiusを適用する時の注意” へのコメントが 2 点あります

  1. 通りすがりの初心者です。
    テーブルの角が丸くならず、3時間くらいはまってました。
    助かりました。本当にありがとうございます!

コメントを残す

メールアドレスが公開されることはありません。