CSSにちょっとだけ一手間いれるだけで画像をつかわずとも立体的というか、いわゆるベタっぽいテーブルから脱却できるCSSをご紹介します。コレ簡単でいいかもです。簡単な追加でちょっと上品に見えますよね。
背景色やthへの見出しはお好きにいじってください。
サンプル
今一番行きたい国 | ドバイ |
---|---|
今一番欲しい物 | Bluetooth接続のスピーカー |
今食べたいもの | 海鮮料理。海老とか貝類とか… |
コード
以下、htmlとcssです。
html
今一番行きたい国 | ドバイ |
---|---|
今一番欲しい物 | Bluetooth接続のスピーカー |
今食べたいもの | 海鮮料理。海老とか貝類とか。考えたらお腹すいてきた… |
css
table { border-top: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC; border-collapse: separate; } th, td { padding: 10px 12px; border-right: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; } th { background-color: #E2EFF3; vertical-align: top; width: 160px; }
説明
borderの左と上に白い線を一本追加し、tableのborder-collapseをseparateにしているだけなんですけどね。
border-collapseって何
border-collapseとは隣のセルとのborderを重ねるかどうかというCSSプロパティです。デフォルトでは値がseparateとなっていて分かれているんですが、reset.cssではこれがcollapseで重なるように設定されています。なのでどのreset.cssを使っているかにもよるんですが、これをseparateに戻しています。
border-collapse?スタイルシートリファレンス
あとは特に難しいことはないです。
お楽しみを!