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】簡単にアニメーションを実装! Animate.cssの使い方

更新日:2019.11.28
215
WordPress プログラミング

WordPressでブログを始めた方必見!おすすめのプラグインを紹介します

2020.07.22
102
プログラミング

URLにパラメータが付与されてる場合のアンカーリンク作成方法

2022.08.02
358
HTMLCSS プログラミング

【簡単】htmlでpdfファイルを表示・ダウンロードする方法【表示されない場合の解決方法も伝授】

2022.03.23
2870