はじめに
今回はタイトルの通りテーブル要素に角丸をつける方法についてです。思っているよりも複雑で難しかったので、備忘録として残したいと思います。
何故複雑になるのか？
原因は border-collapse: collapse にあります。
このプロパティをつけると table 要素のセルの境界線を共有することができるようになります。 (詳しくは MDN さんがわかりやすいです：https://developer.mozilla.org/ja/docs/Web/CSS/border-collapse)
しかし、この値を設定することでテーブルの角を丸くできなくなってしまいます。
そのため、角を丸くしたいならこの値を指定することができず、自分でがんばってセルの境界線が共有されているように実装する必要があります。
これが複雑になってしまう経緯です。
ということで、このようなケースの実装方法を以下でまとめていきます。
今回のテーブル構造
今回私が実装したテーブルの構造は以下のようになっています
th タグ と td タグで1行 ( tr ) が構成され、それが上から堆積していくような形です
<table>
<tr>
<th>ラベル</th>
<td>データ</td>
</tr>
......
</table>
collapse を指定してみよう
まず、collapse を付けてみます。以下のような状態になります。
border-radius を当てていますが、見ての通り角が丸くなっていません。
See the Pen Untitled by yamataikoku0114 (@yamataikoku0114) on CodePen.
collapse を separate に変えよう
次に、collapse を separate にしてみます。以下のコードでは separate に変更するだけでなく、border-spacing: 0 と overflow: hidden の指定を追加しています。
border-spacing: 0 を追加しているのは separate によってセルの境界線が共有されなくなるので、それによって空いた隙間を埋めます。 (共有されるようになるわけではないので、border の重なりは出てしまいます)
また、overflow: hidden を追加しているのは、親要素である table から子要素である th や td の角がはみ出してしまうためです。
実際に動かして overflow: hidden を消してみるとわかりやすいかなと思います。
See the Pen Untitled by yamataikoku0114 (@yamataikoku0114) on CodePen.
border の重なりを消そう
最後に separate を使っていることで生じた border の重なりを解消していきます。
table の border はそのままにして、th と td に必要または不要な border を追加したり削除したりして、重なりを解消します。
まず、th , tdに当たっている borderをコメントアウトか削除します。そうすると、th と td にどこの線が必要か見えてきやすいと思います。以下のようになります。
See the Pen table border comment out by yamataikoku0114 (@yamataikoku0114) on CodePen.
上記の結果から、th は下側と右側、td は 下側だけが必要なことがわかります。
また、下側に線をつけることで tr の最後の要素は線の重なりが生じてしまうため、削除してあげる必要があります。
今回以下のコードではセルの下側ボーダーを border-block-end 、右側ボーダーを border-inline-end を用いて実装しています。
この作業をすると以下のような完成状態に持っていくことができます。
See the Pen table separate by yamataikoku0114 (@yamataikoku0114) on CodePen.
まとめ
普通にテーブルを実装するよりは明らかに複雑だとは思うので、誰かの一助になればうれしいです。
もし何か間違い等あれば教えていただけると助かります。
参考文献