table要素にborder-radiusが効かないときの対処法

tableにborder-radiusが効かないときはborder-collapseの設定に注目

table 要素に border-radius が効かない場合、
border-collapse の指定に原因があるはずです！

ひょっとして border-collapse: collapse; を指定していませんか？

実はその指定していると border-radius が効きません。

ではどうやって border-radius を適用させるか見ていきましょう。

【Point】table要素にborder-radiusを適用させる

• border-collapse: collapse; の指定を外す。
• セル間の余白は border-spacing で調整する。

【基本コード】table要素にborder-radiusを適用させる

HTML

<table class="table">
  <thead>
    <tr>
      <th class="table-title">title</th>
      <th class="table-title">title</th>
      <th class="table-title">title</th>
      <th class="table-title">title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="table-cell">●●●●</td>
      <td class="table-cell">●●●●</td>
      <td class="table-cell">●●●●</td>
      <td class="table-cell">●●●●</td>
    </tr>
  </tbody>
</table>

CSS

.table{
  border-spacing: 0;
  
  .table-title, .table-cell{
    border-radius: 20px;
  }
}

【Demo】table要素にborder-radiusを適用させる

See the Pen テーブルのセルにborder-radiusを効かせる by さおさん (@saio-th) on CodePen.

【解説】table要素にborder-radiusを適用させる

border-collapse: collapse;が指定されているとborder-radiusが効かない

border-radius を適用したい場合は、
border-collapse: collapse; の指定を外してしまいましょう。

border-collapse: collapse;の指定を外すとセル間に余白ができてしまう

私的経験則で恐縮ですが、
border-collapse: collapse; を指定する第1位の理由って

「セル間の余白を消したい」

ではないでしょうか？

なのに、 border-collapse: collapse; の指定を外してしまうと余白が生まれてしまいますね。

でも大丈夫です。
table 要素の余白を調整するプロパティが用意されています！

それが border-spacing です。

セル間の余白を消す方法

「セル間の余白がない状態＝余白がゼロ」
ですよね。

なので border-spacing の値を 0 に指定しましょう。

.table{
  border-spacing: 0;
}

これでborder-radiusが適用され、且つセル間の余白がないtableが完成です！

border-spacingの使い方

border-spacing は二つの値をとることができます。

border-spacing: 左右の余白　上下の余白;

例えばこのように指定するとセル間に余白が生まれます。

.table{
  border-spacing: 4px 8px;
  
  .table-title, .table-cell{
    border-radius: 20px;
  }
}

See the Pen テーブルのセルにborder-radiusを効かせる【余白あり】 by さおさん (@saio-th) on CodePen.

table のセルには margin プロパティが効きません。
なので、余白を調整したいときは border-spacing プロパティを利用しましょう。

【まとめ】table要素にborder-radiusを適用させる

今回は table 要素に border-radius を適用する方法を見てみました。

• border-collapse: collapse; の指定を外す
• border-spacing の値を 0 にする

そしてセル間の余白を調整するのは border-spacing プロパティです。
余白を入れたい場合は、 border-spacing プロパティの値を指定しましょう。

以上です。
少しでもお役に立てたら嬉しいです！