テーブルを”楽に”角丸にする

基本的なやり方

See the Pen WNvrzav by sphenisc (@sphenisc) on CodePen.

ふつうのテーブルに

border-radius: 8px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;

を付けるだけでいいです。
ただ、IEではうまくいかないらしい。

もっと楽に

See the Pen dyoGmrq by sphenisc (@sphenisc) on CodePen.

ふつうのテーブルを角丸のラップで包んで角を消す方法です。 この方法の良いところは既に作った後のテーブルをtbl_wrapで包むだけで角丸に加工できることです。