「テーブル」ブロックの角を丸くする方法

目的
border-collapseの違い
完成イメージ
実装手順
さいごに

目的

多くの CSSテーブルデザインでは、border-collapse: collapseを使用するのが一般的です。
この設定により、セルの罫線が結合されてすっきりとした見た目になります。

しかしこの方法では、テーブル全体の角を丸くするためのborder-radius効かなくなってしまいます。

一方で、border-collapse: separateを使用することで、テーブルの角にborder-radiusを正しく適用することが可能となります。

この記事では、この方法について説明します。

border-collapseの違い

border-collapseの主な違いをまとめます（表1参照）。

border-collapseの違い

設定値	説明	特徴
separate	各セルのボーダーを分離して表示します	`border-radius`が有効
collapse	隣接するセルのボーダーを結合して表示します	`border-radius`が無効

border-collapse - CSS | MDN

border-collapse は CSS のプロパティで、表 () の中のセルが境界を共有するか分離するかを設定します。

完成イメージ

スタンド	能力
ホワイスネイク	生物の記憶とスタンド能力を、CDのような形状の「DISC」にして取り出す、能力を持つ。
C-MOON	ホワイトスネイクと、緑色の赤ちゃんが融合してできたスタンド。半径約3km以内にある物体の重力の方向を、本体のプッチ神父を中心に、逆転させる能力を持つ。
メイド・イン・メブン	C-MOONが進化したスタンド。全世界の時を、加速させる能力を持つ。

実装手順

以下の手順で実装します。

ラベル
Gutenbergエディターでの設定
Gutenbergエディター

以下の手順で設定します。
1. 「テーブル」ブロックを配置します。
2. 高度な設定→追加CSSクラスにround-tableと入力します。

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

.round-table table {
  border: 1px solid var(--cocoon-x-thin-color);
  border-collapse: separate;
  border-radius: 10px;
  overflow: hidden;

  :is(th, td) {
    border-left: 0;
    border-top: 0;

    &:last-child {
      border-right: 0;
    }
  }

  tbody tr:last-child :is(th, td) {
    border-bottom: 0;
  }
}

さいごに

今回紹介した方法を使えば、テーブルの角を自然に丸くデザインすることができます。
「テーブル」ブロックに .round-tableクラスを適用することで、簡単に柔らかいスタイルを実現できます。