HTML

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

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

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

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

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

A B C D E
1 あああ いいい ううう えええ おおお
table {
border-spacing: 0; // ボーダーとボーダーの間隔を指定
border-collapse: separate; // 隣接するセルのボーダーの間隔をあけて表示
border-radius: 10px;
}

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

まとめ

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