CSSを使ってテーブルの角丸デザインに対応する方法
table要素のCSSコーディングはなかなか曲者です。
なかでも角丸になったデザインのテーブルに出くわしたときは、単純にtableにborder-radiusを加えたとしてもうまくいきません。
今回は角丸のテーブルデザインに対応するためのCSSをご紹介します。
border-collapse: collapse;に要注意!
まずはHTMLから、一般的なtableのコーディングですね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <table> <tbody> <tr> <th>会社名</th> <td>xxxxxxxx</td> </tr> <tr> <th>代表者名</th> <td>xxxxxxxx</td> </tr> <tr> <th>設立</th> <td>xxxxxxxx</td> </tr> <tr> <th>所在地</th> <td>xxxxxxxx</td> </tr> <tr> <th>事業内容</th> <td>xxxxxxxx</td> </tr> </tbody> </table> |
そしてCSS、次のようなコードになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | table { border: 1px solid #ccc; border-collapse: separate; border-radius: 5px; border-spacing: 0; } table th, table td { border-bottom: 1px solid #ccc; padding: 10px 20px; } table th { border-right: 1px solid #ccc; background: #EEE; } table tr:first-child th { border-radius: 5px 0 0 0; } table tr:first-child td { border-radius: 0 5px 0 0; } table tr:last-child th { border-bottom: none; border-radius: 0 0 0 5px; } table tr:last-child td { border-bottom: none; border-radius: 0 0 5px 0; } |
注意点としてはtableにborder-collapse: separate;を設定している点です。
reset.cssなどCSSの初期化ファイルを使用している場合は、table要素にborder-collapse: collapse;が設定されているケースがあるので今回のようにseparateという値で書き換える必要があります。
あとはfirst-childやlast-childなどのセレクタを駆使して要素を選んでborder-radiusを設定してあげます。
というわけでデモで表示をご確認ください。
注意点さえ踏まえればそれほど難しいCSSではないので、覚えておくと便利です。
参考記事
求人目的のブランディングサイトからネットショップ構築まで、幅広いホームページ制作に対応します。