※当サイトではアフィリエイト広告を利用していますこんにちは、かんです(»@minimal_kan)WordPressをメインにWEB制作をしています。「ホームページにテーブルを実装したい。丸っこいテーブルを作りたい。コピペでサクッと作れないかな」こんなお悩みを解決いたします。実装したい内容は以下になります。完成図それでは早速見ていきましょう!【コピペOK】CSSを使ったテーブルの角を丸くする方法テーブルの実装は基本的に、角が丸くなくカクカクしたテーブルがほとんどだと思います。実装するためのコードを紹介します。コピペでいけるので、あとはご自由に使ってみてください。normal;}上記を解説していきます。border-radiusで丸くすることはできないCSSで角を丸くするというと、border-radiusが一般的ですよね。これをtableに指定するだけでいけるのでは、、?と思い浮かぶかもしれません。collapseが指定されていた時、border-radiusを指定しても角丸になってくれないのです。collapseは、隣接している線を重ねて表示させるプロパティになります。そのため簡単に装飾ができるので、リセットCSSや共通のCSSとして指定されていることも多く、tableを作る時に必須のプロパティになります。separate;で解決separateを指定すると隣接セルのボーダーを空ける要素を持っています。collapseのままだと角丸分の隙間ごとつめてしまい、角丸にならないようです。separate;を特定のテーブルタグに対して指定しておくことで解決することが分かりました。Reserved.プライバシーポリシー|サイトマップ|特定商取引法に基づく。