MS Access Tips/Sample and VBA and Blog customize etc...

CSSでテーブルデザインをクオリティアップ

当ブログでは、テーブルデータ例やプロパティ設定、クエリデザイン等を表示するのにHTMLのテーブルを利用してますが、スタイルシートを弄ってテーブルデザインをちょっと立体的にしてみました。

CSSTableDsign.png

左側は今までのも、右側が現在のものです。どうでしょうか。好みの問題もあると思いますが、クオリティアップしたように思いませんか。

難易度:

まず、以前のテーブルのHTMLとCSSの設定は、下記のようでした。

HTML

CSS

HTMLの設定と、CSSの設定が混在する意味不明のものでした。CSSというのがよく分かっていなかったのがバレバレです。(今もそれほど分かってないですが)

下記が現在の設定です。

HTML

CSS

要は、以前の記事、入力エリアをちょっとだけ立体的にみせるCSS小技 と同様の手法でちょっとだけ立体的にみせてます。 border-collapse: separate; で各セルを独立させるのがポイントです。

border-spacing: 0px; とすることで各セルがピッタリとくっつきます。ただし、FireFox と Chrome ではうまく行くのですが、IE だとなぜかくっつかずに下図のように数ピクセル分隙間があいてしまいます。しかたがないので、HTMLの方で cellspacing="0" とすることでIEでもくっつきました。CSSだけで対処する方法が分からなかったのでやむなくこのような対処をしました。

CSSTableDsign2.png

後は、セルに padding を設定して文字のまわりに余裕を持たせたり、ヘッダーのフォントサイズを少し小さくするなど、細かい調整もしてます。

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/255-c55fd347
該当の記事は見つかりませんでした。