Written by Kasumi

【簡単】html・cssを使ってtable(テーブル)タグを角丸にする方法

テーブルタグ(以下table)を角丸にしたくCSSでborder-radiusをあててるが角丸にならない。

角丸にする方法を知りたい。

本記事ではCSSでborder-collapse値を変更し、角丸を有効にする方法を紹介します。

tableタグ角丸サンプル

See the Pen
Untitled
by Kohei (@kouk05)
on CodePen.0

tableタグを角丸にしたサンプルになります。

角丸の方法は以下の通りです。

tableタグにCSSでborder-collapse: separate;を付与

  table {
    border-collapse: separate;
  }

tableタグにborder-collapse: collapse;が設定されていませんか?

collapseは隣接するtableセルのボーダーを重ねて表示してくれます。

実はこれがtableが角丸にならない原因です。

角丸にするには、collapseではなくborder-collapse: separate;を指定します。

separateはtableセルのボーダーを重ねず離して表示します。これにより角丸が効くようになります。

separateにした時のボーダー間の隙間を無くす

  table {
    border-collapse: separate;
    letter-spacing: 0;
  }

border-collapse: separate;を指定すると、ボーダー間に隙間が生じます。

tableタグにletter-spacing: 0; を追加しましょう

隙間がなくなります。

ただしボーダーが重なり二重線になるので線の一方を消すなどして面倒ですがセルごとに個別にborderプロパティを付与しましょう。

以上で角丸テーブルの完成です。

目次

関連記事

HTMLCSS

【簡単】CSSで点線・破線の間隔を空ける方法

2022.10.01
1264
HTMLCSS

CSSだけで台形を作る方法

更新日:2022.09.21
589
HTMLCSS

【CSS】ボーダー斜めのストライプ背景を作成する方法

2022.10.02
1137
HTMLCSS

【sass】@mixinを使って汎用するCSSプロパティを共通化して呼び出す方法

2023.04.23
166