HTML テーブルを角丸にする方法

HTML テーブルタグで角丸にする方法を紹介します。
例えば、テーブルタグにアクセントを加えたい時に便利な方法です。

1. テーブルタグを角丸にする方法

テーブルタグを角丸にする方法

テーブルタグを角丸にする方法紹介します。
テーブルタグは「ボーダーの感覚」や「隣接するボーダーの間隔」の設定のせいで、角丸（border-radius）が正しく適用されない場合があります。
そのため、角丸（border-radius）を指定するには、border-spacing と border-collapse の指定を調整する必要があります。
テーブルタグに角丸を適用した場合の実際の見た目と CSS の記述は以下の通りです。

table {

  border-spacing: 0; // ボーダーとボーダーの間隔を指定

	border-collapse: separate; // 隣接するセルのボーダーの間隔をあけて表示

	border-radius: 10px;

}

ボーダーなどの指定は別途加えてください。
初期スタイルではボーダーとボーダーの間隔が開いているため border-spacing で 0 を指定。
隣接するセルのボーダーの間隔をあけて表示するために border-collapse で separate を指定。
背景色が角丸からはみ出る場合は table に overflow: hidden; を加えてください。

まとめ

HTML テーブルタグを角丸にする方法を紹介しました。