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

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

目次

関連記事

プログラミング

【映画】トゥームレイダーファーストミッションのあらすじ・感想を解説(最後に一部ネタバレ含む)

更新日:2020.03.23
1687
HTMLCSS jQuery

【簡単CSS・jQuery】上スクロール時のみヘッダー・ナビを固定表示する方法

更新日:2022.09.09
1802
HTMLCSS プログラミング

【簡単】CSSで文字のitalicが効かない。transformで傾きを付けよう

2022.04.10
1498
HTMLCSS プログラミング

iframe内のリンク・formを別タブで開く方法

2021.11.02
3948