[CSS,border-radius]tableを角を丸くするのって結構めんどいよね

すっかり寒くなりましたね。次回の更新は暖かくなるころだと思いますはい。

今回はtableの角を丸くしてみよー！
結論からお話させていただくとtableをborder-collapse:collapse;してあるとできません。
reset.cssを使うケースが殆んどだと思いますが、このreset.cssには大抵border-collapse:collapse;が記述してありますよね。お手製のreset.cssの場合も含めて。
border-collapse:seprate;してやれば比較的うまくいくはずです。

まずは完成しているtableの角丸から

See the Pen XmeEVg by mitsuki sagayama (@sagayama) on CodePen.

scssじゃなくてcssはこちら

table {
  width: 300px;
  border: 1px solid #000;
  border-radius: 10px;
  border-spacing: 0;
  border-collapse: separate;
}
table tr td {
  padding: 0.5em;
  border-left: 1px solid #000;
  border-top: 1px solid #000;
}
table tr td:first-child {
  border-left: none;
}
table tr:first-child td {
  border-top: none;
}

scssまたはcssをご覧のとおりtableセレクタにborder-collapse:separate;が記述してあるのが分かると思います。

実はこのtableの角丸は、角を丸くするのが面倒なんじゃなくて丸した後のborderの処理が面倒なんです。
その辺を図解してみました。

まずはtdに対してborder-leftとborder-bottomを設定します。
border-rightとborder-topじゃダメなの？と思うかもですがダメなんです。IE対策なんです。詳しくは次で。

border-collapse:collapse;じゃないので左と下のボーダーが2重に見えてしまいます。
そこで擬似クラス:first-childを使って左と下のボーダーを消します。
ここでlast-childじゃなくてfirst-childを使いたかったから左と下だったんですね。
first-childはIE7から対応してますがlast-childはIE9からしか対応してません。選択肢は1つですね。

以上で角丸tableの完成です。

まとめ

良かれと思って使ったreset.cssが障害になってたtableの角丸はborder-collapse: separate;で難なく解決！
その後のボーダーの処理が意外と面倒っていうお話でした。
tdだけじゃなくthも入ってくるともう少しボリューム増えますけど、このページの情報を抑えておけば大丈夫！たぶん。