サイトアイコン LUCKLOG

【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)の背景が角丸になっておらずはみ出ている状態です。これではまだ正常な角丸とは言えませんので、もう一つ手を加えます。

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

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

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

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

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

実際に設定した値が下記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

まとめ

スポンサーリンク