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 プログラミング

【簡単】aタグのテキストが改行されない問題を解決する方法

2022.01.26
12155
HTMLCSS

CSSで透過グラデーションを作成する方法

2023.01.20
5670
HTMLCSS

【簡単】CSSで背景画像だけ回転させる方法

2022.12.02
16096
HTMLCSS

【簡単】楽天GOLDページで画像・JS・CSSファイルのキャッシュが削除されない原因を解決!

更新日:2022.11.24
1840