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

CSSで角丸のテーブルを作成する方法をサンプルコード付きで紹介します。角丸は「border-radius」プロパティで実現できますが、テーブルでは角丸にならないケースもあります。テーブルの角丸の仕方をマスターしましょう!

コンテンツ [表示]

  1. 1角丸のテーブルを作成したい
  2. 2角丸のテーブルを作成する方法
  3. 2.1border-radiusを設定してみる
  4. 2.2「border-collapse: collapse」が設定されていると角丸に出来ない
  5. 3まとめ

角丸のテーブルを作成したい

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

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

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

テーブルの角丸イメージ

テーブルはデフォルトでは角ばっていますが、角を数って丸みをつけます。

角丸のテーブルを作成する方法

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

border-radiusを設定してみる

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

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

「border-collapse: collapse」が設定されていると角丸に出来ない

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

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

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

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

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

あわせて読みたい
border-spacing
CSSのborder-spacingプロパティはテーブル(表)のセルにおいて、隣接するセルの枠線との間隔を指定するプロパティです。border-spacingプロパティの構文や使い方をサンプルコード付きで解説します。
あわせて読みたい
border-collapse
CSSのborder-collapseプロパティは隣接するセルの枠線を共有するか(重ねる)、分離するか(間隔をあける)を設定するプロパティです。border-collapseプロパティの構文や使い方をサンプルコード付きで解説します。
あわせて読みたい
overflow
CSSのoverflowプロパティは要素の内容がボックスの範囲から溢れる場合に、その見せ方を制御するプロパティです。overflowプロパティの構文や使い方をサンプルコード付きで解説します。

まとめ

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

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

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

今だけ
無料

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

Qumeru

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

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

関連記事

【期間限定】全カリキュラム無料で提供中!

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

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

目次