CSSで角丸のテーブルを作成する方法を解説!
CSSで角丸のテーブルを作成する方法をサンプルコード付きで紹介します。角丸は「border-radius」プロパティで実現できますが、テーブルでは角丸にならないケースもあります。テーブルの角丸の仕方をマスターしましょう!
角丸のテーブルを作成したい
みなさんはCSSで角丸を実現できますでしょうか?
CSSでは角丸はborder-radius
プロパティで設定できますが、テーブルに対しては効かない場合があります。
そこで、この記事ではHTMLのテーブルで角丸にする方法について解説していきます。
角丸のテーブルを作成する方法
それでは角丸のテーブルの作成の仕方を見ていきましょう。今回は下記のサンプルコードのテーブルを角丸にしていきたいと思います。
border-radiusを設定してみる
それでは角を丸めるプロパティのborder-radiusを
テーブルに設定してみましょう。
.table
のセレクタにborder-radius
に10px
を設定しました。しかしプレビュー上ではテーブルは角丸となっていません。
「border-collapse: collapse」が設定されていると角丸に出来ない
実はテーブルでは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日までの期間限定で無料で提供しています。
無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!
テーブルはデフォルトでは角ばっていますが、角を数って丸みをつけます。