テーブルの角を丸くする方法

# はじめに

今回はタイトルの通りテーブル要素に角丸をつける方法についてです。思っているよりも複雑で難しかったので、備忘録として残したいと思います。

# 何故複雑になるのか？

原因は `border-collapse: collapse` にあります。

このプロパティをつけると `table` 要素のセルの境界線を共有することができるようになります。 (詳しくは MDN さんがわかりやすいです：https://developer.mozilla.org/ja/docs/Web/CSS/border-collapse)

しかし、この値を設定することでテーブルの角を丸くできなくなってしまいます。

そのため、角を丸くしたいならこの値を指定することができず、自分でがんばってセルの境界線が共有されているように実装する必要があります。

これが複雑になってしまう経緯です。

ということで、このようなケースの実装方法を以下でまとめていきます。

# 今回のテーブル構造

今回私が実装したテーブルの構造は以下のようになっています

`th` タグ と `td` タグで1行 ( `tr` ) が構成され、それが上から堆積していくような形です

```jsx
<table>
	<tr>
	  <th>ラベル</th>
	  <td>データ</td>
	</tr>
......
</table>
```

# collapse を指定してみよう

まず、`collapse` を付けてみます。以下のような状態になります。

`border-radius` を当てていますが、見ての通り角が丸くなっていません。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="GgKZLqV" data-pen-title="Untitled" data-user="yamataikoku0114" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/yamataikoku0114/pen/GgKZLqV">
Untitled</a> by yamataikoku0114 (<a href="https://codepen.io/yamataikoku0114">@yamataikoku0114</a>)
on <a href="[https://codepen.io](https://codepen.io/)">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# collapse を separate に変えよう

次に、`collapse` を `separate` にしてみます。以下のコードでは `separate` に変更するだけでなく、`border-spacing: 0` と `overflow: hidden` の指定を追加しています。

`border-spacing: 0` を追加しているのは separate によってセルの境界線が共有されなくなるので、それによって空いた隙間を埋めます。 (共有されるようになるわけではないので、`border` の重なりは出てしまいます)

また、`overflow: hidden` を追加しているのは、親要素である `table` から子要素である `th` や `td` の角がはみ出してしまうためです。

実際に動かして `overflow: hidden` を消してみるとわかりやすいかなと思います。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="GgKqpae" data-pen-title="Untitled" data-user="yamataikoku0114" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/yamataikoku0114/pen/GgKqpae">
Untitled</a> by yamataikoku0114 (<a href="https://codepen.io/yamataikoku0114">@yamataikoku0114</a>)
on <a href="[https://codepen.io](https://codepen.io/)">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# border の重なりを消そう

最後に `separate` を使っていることで生じた `border` の重なりを解消していきます。

`table` の `border` はそのままにして、`th` と `td` に必要または不要な border を追加したり削除したりして、重なりを解消します。

まず、`th` , `td`に当たっている `border`をコメントアウトか削除します。そうすると、`th` と `td` にどこの線が必要か見えてきやすいと思います。以下のようになります。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="EaYyPPo" data-pen-title="table border comment out" data-user="yamataikoku0114" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/yamataikoku0114/pen/EaYyPPo">
table border comment out</a> by yamataikoku0114 (<a href="https://codepen.io/yamataikoku0114">@yamataikoku0114</a>)
on <a href="[https://codepen.io](https://codepen.io/)">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

上記の結果から、`th` は下側と右側、`td` は 下側だけが必要なことがわかります。

また、下側に線をつけることで `tr` の最後の要素は線の重なりが生じてしまうため、削除してあげる必要があります。

今回以下のコードではセルの下側ボーダーを `border-block-end` 、右側ボーダーを `border-inline-end` を用いて実装しています。

この作業をすると以下のような完成状態に持っていくことができます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VYZaNWN" data-pen-title="table separate" data-user="yamataikoku0114" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/yamataikoku0114/pen/VYZaNWN">
table separate</a> by yamataikoku0114 (<a href="https://codepen.io/yamataikoku0114">@yamataikoku0114</a>)
on <a href="[https://codepen.io](https://codepen.io/)">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# まとめ

普通にテーブルを実装するよりは明らかに複雑だとは思うので、誰かの一助になればうれしいです。

もし何か間違い等あれば教えていただけると助かります。

# 参考文献

https://developer.mozilla.org/ja/docs/Web/CSS/border-collapse