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

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

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

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

1table {
2    border-collapse:collapse;
3    border:1px solid #000;
4    -webkit-border-radius:10px;
5    -moz-border-radius:10px;
6    border-radius:10px;
7}

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

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

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

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

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

1table {
2    border-collapse:separate;
3    border:1px solid #000;
4    -webkit-border-radius:10px;
5    -moz-border-radius:10px;
6    border-radius:10px;
7}

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

“tableの枠線にborder-radiusを適用する時の注意” への2件の返信

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

返信 ↓

助かりました！ありがとうございます！！

返信 ↓

“tableの枠線にborder-radiusを適用する時の注意” への2件の返信

makie へ返信する コメントをキャンセル

makie へ返信するコメントをキャンセル