HTMLで角丸のテーブルを作る|overflow-hidden以外の方法

overflow-hidden以外の方法で角丸のテーブルを作る方法が知りたい人

角丸テーブルはoverflow-hiddenで実装してたけど、今回のテーブルはoverflow-hiddenできないんだよね。
テーブル内にドロップダウンあるから、overflowしても表示されないとマズイ。

しんぺー

今回はこんな悩みに答えます。
tableはborder-radiusが効かないので、tableの親に<div>タグを置き、<div>タグにborder-radiusをかけ、overflow-hiddenする方法がありますが、今回はちゃんとtableを角丸にする方法です

完成形のイメージ

See the Pen 角丸のテーブル by shimpei (@shimpei) on CodePen.

解説は後ほど。

この記事を書いた人

アバター

しんぺー

Web制作会社のフロントエンドエンジニア。
2019年9月よりWeb制作を独学、2021年3月ジョブチェンジでエンジニアに。

プログラミングを始めたい方や、学習中の方、副業・転職したい方に向けて発信していますが、業務で覚えた技術がメインになってます。

趣味は音楽です。下の「ウェブサイト」に趣味で作ったサイトをリンクしていますので、興味ある方はどうぞ。