BLOG

  • Facebook
  • Twitter

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

求人目的のブランディングサイトからネットショップ構築まで、幅広いホームページ制作に対応します。

その他のオススメの記事

ホームページのことは何でもお気軽にご相談ください!

092-406-8630

平日10:00〜18:00セールス目的のお電話はご遠慮ください

シンス株式会社

Webマーケティングのお役立ち情報を発信しています!