【CSS】tableタグで角丸にならない・border-radiusが効かない！？角丸にする方法

tableタグのテーブル（表）を角丸にしようとすると上手くいかないことがあります。

自分も何度かその状態になって、その度そうだったと思いだしては対応していました。そろそろ自分のためにもやり方を残しておこうと思います。

tableタグ（表・テーブル）を角丸にする方法

まず、普通に設定した状態から対応してみましょう。

下記のようなhtmlを例に角丸にしていきますね。

<table class="radius">
  <thead>
    <tr>
      <th>氏名</th>
      <th>身長(cm)</th>
      <th>体重(kg)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>太郎</td>
      <td>160</td>
      <td>50</td>
    </tr>
    <tr>
      <td>次郎</td>
      <td>170</td>
      <td>55</td>
    </tr>
  </tbody>
</table>

氏名	身長(cm)	体重(kg)
太郎	160	50
次郎	170	55

tableにborder-radiusを設定

.radius {
  border-radius: 20px;
}

上記cssを適応した結果が下記になりますが、角丸になっていません。

氏名	身長(cm)	体重(kg)
太郎	160	50
次郎	170	55

では、まず第一の問題点です。それは、border-collapseがcollapseになっていることです。

同じような設定で角丸になった方は既にborder-collapseがseparateとなっている可能性が高いですので、次に進んでください。

tableのborder-collapseに「separate」を設定

.radius {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 20px;
}

border-collapse: separate;を加えたものが下記になります。
※「separate」を設定するとセル間にスペースができるので「border-spacing: 0;」で0にする必要があります

氏名	身長(cm)	体重(kg)
太郎	160	50
次郎	170	55

tableタグ（テーブル）自体は角丸になりましたが、中のセル（thやtd）の背景が角丸になっておらずはみ出ている状態です。これではまだ正常な角丸とは言えませんので、もう一つ手を加えます。

これは正直力技なのですが…、四隅つまり左上、右上、左下、右下のセルに対してそれぞれ角丸を設定します。

四隅（左上、右上、左下、右下）のセルに角丸を設定

左上は左上が角丸になるように、右上は右上が、左下は左下が、右下は右下が角丸になるよう設定します。

少し説明すると、まず左上、右上については下記のようなセレクタで対応できます。

まず、1行目はtheadタグなので「thead 」が必要
左上は1番目のセル（th）なので、「thead th:first-child」
右上に最後のセル（th）なので、「thead th:last-child」

次に左下、右下については下記のようなセレクタで対応できます。

まず、2行目以降はtbodyタグなので「tbody 」が必要
左下、右下は最終行なので、「tbody tr:last-child」が必要
左下は1番目のセル（td）なので、「tbody tr:last-child td:first-child」
右下に最後のセル（td）なので、「tbody tr:last-child td:last-child」

実際に設定した値が下記CSSになります。

.radius {
  border-collapse: separate;
  border-spacing: 0; 
  border-radius: 20px;
}
/* 左上 */
.radius thead th:first-child {
  border-radius: 20px 0 0 0;
}
/* 右上 */
.radius thead th:last-child {
  border-radius: 0 20px 0 0;
}
/* 左下 */
.radius tbody tr:last-child td:first-child {
  border-radius: 0 0 0 20px;
}
/* 右下 */
.radius tbody tr:last-child td:last-child {
  border-radius: 0 0 20px 0;
}

ようやくtableタグを角丸にすることができました。

氏名	身長(cm)	体重(kg)
太郎	160	50
次郎	170	55

border-collapse: separate;によって、内部のborderが太くなっている

実は「border-collapse: separate;」を設定したため、borderが重ならず2本分になってしまっています。よって、きれいにするためには、上もしくは下、左もしくは右の一方のborderが不要になります。

よって、下記を追記すれば、borderの幅は同じになります。

/* 内部の上のborderを取りやめ。設定しているborderを削除でもOK */
.radius tbody td {
  border-top-width: 0;
}
/* 左のborderを取りやめ。設定しているborderを削除でもOK */
.radius th,
.radius td {
  border-left-width: 0;
}
/* ただし、一番左は必要 */
.radius th:first-child,
.radius td:first-child {
  border-left-width: 1px;
}

氏名	身長(cm)	体重(kg)
太郎	160	50
次郎	170	55

参考：すべてがtbodyに属している場合

<table class="radius">
  <tbody>
    <tr>
      <td>太郎</td>
      <td>160</td>
      <td>50</td>
    </tr>
    <tr>
      <td>次郎</td>
      <td>170</td>
      <td>55</td>
    </tr>
    <tr>
      <td>三郎</td>
      <td>155</td>
      <td>55</td>
    </tr>
  </tbody>
</table>

上記のhtmlのようにすべてtbodyに属している場合は下記のようなcssで対応できます。

.radius {
  border-collapse: separate;
  border-spacing: 0; 
  border-radius: 20px;
}
/* 左上 */
.radius tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}
/* 右上 */
.radius tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}
/* 左下 */
.radius tr:last-child td:first-child {
  border-radius: 0 0 0 20px;
}
/* 右下 */
.radius tr:last-child td:last-child {
  border-radius: 0 0 20px 0;
}
/* 上のborderを取りやめ。設定しているborderを削除でもOK */
.radius td {
  border-top-width: 0;
}
/* ただし、一番上は必要 */
.radius tr:first-child td {
  border-top-width: 1px;
}
/* 左のborderを取りやめ。設定しているborderを削除でもOK */
.radius td {
  border-left-width: 0;
}
/* ただし、一番左は必要 */
.radius td:first-child {
  border-left-width: 1px;
}

こちらも正常に角丸になりました。

太郎	160	50
次郎	170	55
三郎	155	55

まとめ

tableタグにborder-radiusを設定する
tableタグはborder-collapse: separate;の必要がある
tableタグはborder-spacing: 0;が必要
左上、右上、左下、右下のセルもそれぞれ左上、右上、左下、右下を角丸にする必要がある
設定の仕方はtableの組み方によって異なります。CSSセレクタでうまく設定しましょう
テーブルの外枠ではなく内枠は「separate」によって、線が重複してしまうので、不要なborderを削除する必要がある
設定の仕方はtableの組み方によって異なります。CSSセレクタでうまく設定しましょう