• HTMLCSS
• プログラミング

【簡単】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プロパティを付与しましょう。

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