|
|
1. cssを使わず、tableで単に border="1" bordercolor="#aa9ef8"と指定。
これだと枠線がcss指定の3px程度に太ってしまう。
iモード(DoCoMo)
|
WILLCOM
|
EZweb(KDDI)
|
Yahoo Mobile
|
Yahoo!ケータイ(旧Vodafon live!)
|
2. 上の状態から、table指定を外し、各セルに cssで色と「細い線=thin」を指定してみる:
bordercolor="#aa9ef8" style="border-width: thin;" を追加。 しかし枠線の重なり合うところが太くなってしまう。 (しかもSafari以外ではどうも枠線が表示されない模様)
iモード(DoCoMo)
|
WILLCOM
|
EZweb(KDDI)
|
Yahoo Mobile
|
Yahoo!ケータイ(旧Vodafon live!)
|
3. cssで、各セルに枠線の指定を付ける。
border:1px solid #bbaaff; 上と同じく、枠線の重なり合うところが太くなってしまう。
iモード(DoCoMo)
|
WILLCOM
|
EZweb(KDDI)
|
Yahoo Mobile
|
Yahoo!ケータイ(旧Vodafon live!)
|
4. 枠線の重なりを防ぐため、 3種類のcssを使い分ける。 class="kei01" class="kei02" class="kei03"を使用。 .kei02 {border-top:1px solid #bbaaff; border-right:1px solid #bbaaff; border-left:1px solid #bbaaff; }など。 セル数が多くなるとちょっと面倒。
iモード(DoCoMo)
|
WILLCOM
|
EZweb(KDDI)
|
Yahoo Mobile
|
Yahoo!ケータイ(旧Vodafon live!)
|
|
5. また、tableにborder="" bordercolor=""の 指定だけだと、 Firefoxでは、cssのridgeの 指定をしたときのようになってしまう。 tableにborder="3" bordercolor="#aa9ef8"
代引金額
|
代引手数料(税込)
|
1万円まで
|
315円
|
3万円まで
|
420円
|
10万円まで
|
630円
|
30万円まで
|
1,050円
|
50万円まで
|
2,100円
|
100万円まで
|
3,150円
|
100万円を超える場合
|
4,200円
|
6. 上と同じtableで、cssを使わず、 「4.」のような枠線を作る。 tableのbgに色を付け、各セルのbgを白に。 border="0" cellspacing="1" cellpadding="0" bgcolor="#bbaaff"。各セルでbgcolor="#ffffff"。
代引金額
|
代引手数料(税込)
|
1万円まで
|
315円
|
3万円まで
|
420円
|
10万円まで
|
630円
|
30万円まで
|
1,050円
|
50万円まで
|
2,100円
|
100万円まで
|
3,150円
|
100万円を超える場合
|
4,200円
|
cssの利用が推奨されるところですが、 作業自体はこちらの方が楽。
|
|
●borderのその他の主なスタイル指定
css class="kei51" を使用。border:3px double #bbaaff
Yahoo!ケータイ(旧Vodafon live!)
|
css class="kei52" を使用。border:3px groove #bbaaff
Yahoo!ケータイ(旧Vodafon live!)
|
css class="kei53" を使用。border:3px ridge #bbaaff
Yahoo!ケータイ(旧Vodafon live!)
|
css class="kei54" を使用。border:3px inset #bbaaff
Yahoo!ケータイ(旧Vodafon live!)
|
css class="kei55" を使用。border:3px outset #bbaaff
Yahoo!ケータイ(旧Vodafon live!)
|
|
→ htmlで、細くてきれいな枠線の表組を作る(2) |