【CSS】初心者でも簡単にできる！角丸のtableを作成する方法

2025.10.13

当ページのリンクには広告が含まれています。

URLをコピーしました！

こんにちは。すずきです。
本記事ではCSSで角丸のテーブルを作成する方法を紹介します。

このような人にオススメ

角丸のテーブルを作成する方法が分からない。
自分で角丸のテーブルを作ろうとするとなぜかうまくいかない。
既存のテーブルを角丸にする方法が分からない。

角丸テーブルが上手くできない原因

「角を丸くする」となるとまず思いつくのがborder-radiusと思うのですが、<table>タグに指定しても上手く反映されない方も多いと思います。

実はborder-collapse: collapse;の指定があると<teble>の角は丸くなりません。
自分で指定したつもりがなくても、リセットCSSで指定されている場合があります。

なので角丸テーブルを作成する場合は、まずborder-collapse: collapse;を変更するところから始めます。

それでは、次から具体的な実装方法を解説していきます。

角丸テーブルの実装方法

HTMLを記述する

まずはHTMLを作成します。
ここは特に意識することはなく、普段と同じように記述して大丈夫です。

今回の例で記述したコードは以下になります。

<table class="table__round">
  <thead>
    <tr>
      <th>タイトル1</th>
      <th>タイトル2</th>
      <th>タイトル3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>テキスト1</td>
      <td>テキスト2</td>
      <td>テキスト3</td>
    </tr>
    <tr>
      <td>テキスト1</td>
      <td>テキスト2</td>
      <td>テキスト3</td>
    </tr>
    <tr>
      <td>テキスト1</td>
      <td>テキスト2</td>
      <td>テキスト3</td>
    </tr>
  </tbody>
</table>

CSSを記述する

border-collapseを指定

まずは先ほど書いたborder-collapseを指定を指定します。
border-collapseはセル同士の隙間を指定するプロパティで、collapseで隙間無し、separateで隙間有りになります。

collapseでは角が丸くならないので、separateを指定します。

  .table__round {
    border-collapse: separate;
  }

border-spacingを指定する

border-collapse: separate;を指定したことで、セル同士に隙間ができてしまったかと思います。

なので次はセル同士の隙間を直していきます。
セル同士の隙間は、border-spacingで指定することができますので、0を指定します。

  .table__round {
    border-spacing: 0;
  }

borderを記述する

次に枠線を記述していきますが、border-collapse: separate;を指定している場合、線が重複します。

th,td {
  border-top: solid 1px red;
  border-left: solid 1px red;

  border-bottom: solid 1px blue;
  border-right: solid 1px blue;
}

今回は例として、上と左は赤、下と右は青のborderを各セルに入れています。
セル同士重なる部分はborderも重複し、紫がかっています。

重複しないよう注意しながら、borderを指定していきます。
今の例から、赤い線を消すイメージです！

.table__round {
  border-top: solid 1px lightgray;
  border-left: solid 1px lightgray;
}
.table__round th,
.table__round td {
  border-bottom: solid 1px lightgray;
  border-right: solid 1px lightgray;
}

各セルの下と右にborderを指定し、<table>タグの上を左にもborderを指定しています、

border-radiusを指定する

最後に角を丸くしていきます。
border-radiusを指定するのは以下の2ヶ所です。

<table>タグ
各角のセル

.table__round {
  border-radius: 1rem;
}
.table__round thead tr:first-child th:first-child {
  border-top-left-radius: 1rem;
}
.table__round thead tr:first-child th:last-child {
  border-top-right-radius: 1rem;
}
.table__round tbody tr:last-child td:first-child {
  border-bottom-left-radius: 1rem;
}
.table__round tbody tr:last-child td:last-child {
  border-bottom-right-radius: 1rem;
}

これで、以下のような角丸のテーブルが作成できたと思います。
完成品のコードもこちらにまとめています。

See the Pen 【CSS】角丸テーブルの作り方 by すずき (@k-suzuki3533) on CodePen.