CSSで角丸のテーブルを作成する方法を解説！

みなさんはCSSで角丸を実現できますでしょうか？

CSSでは角丸はborder-radiusプロパティで設定できますが、テーブルに対しては効かない場合があります。

そこで、この記事ではHTMLのテーブルで角丸にする方法について解説していきます。

それでは角丸のテーブルの作成の仕方を見ていきましょう。今回は下記のサンプルコードのテーブルを角丸にしていきたいと思います。

それでは角を丸めるプロパティのborder-radiusをテーブルに設定してみましょう。

.tableのセレクタにborder-radiusに10pxを設定しました。しかしプレビュー上ではテーブルは角丸となっていません。

実はテーブルではborer-collapse: collapseが設定されていると角丸にすることが出来ません。

border-collapseプロパティは隣のセルの枠線を重ねて表示する（collapse）か間隔をあけるか（separate）を設定できるプロパティです。ここで重ねて表示する（collapse）を設定すると角丸にならないため、border-collapseには「separate」を設定する必要があります。

それではseparateを設定してみましょう。

無事に角丸となりました。ただ、separateにした関係でセルとセルの間に隙間が生まれてしました。

border-spacing: 0として隙間を埋めるのと、隙間を埋めるとthやtd要素の背景色が枠線を超えてくるためoverflow: hiddenを設定して見た目を整えて完成です。

いかがでしたでしょうか。HTMLのテーブルで角丸を実現する方法を紹介してきました。border-collapseプロパティ一つで角丸はできなくなるため注意が必要です。

「border-radiusを設定したのに角丸できない？？なんで？？」

で時間をとられるのは結構あるあるなので、ぜひ今回紹介した内容を覚えておきましょう！

【5月31日まで】全カリキュラム無料で提供中！

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい！