ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

CSSを使ってテーブルの角丸デザインに対応する方法

| カテゴリー : HTML/CSS

table要素のCSSコーディングはなかなか曲者です。

なかでも角丸になったデザインのテーブルに出くわしたときは、単純にtableにborder-radiusを加えたとしてもうまくいきません。

今回は角丸のテーブルデザインに対応するためのCSSをご紹介します。

border-collapse: collapse;に要注意!

まずはHTMLから、一般的なtableのコーディングですね。

そしてCSS、次のようなコードになります。

注意点としてはtableにborder-collapse: separate;を設定している点です。

reset.cssなどCSSの初期化ファイルを使用している場合は、table要素にborder-collapse: collapse;が設定されているケースがあるので今回のようにseparateという値で書き換える必要があります。

あとはfirst-childやlast-childなどのセレクタを駆使して要素を選んでborder-radiusを設定してあげます。

というわけでデモで表示をご確認ください。

注意点さえ踏まえればそれほど難しいCSSではないので、覚えておくと便利です。

参考記事

CSS:角丸のテーブルを作成する方法 | NxWorld

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。