- ベストアンサー
ホームページ 点線の入った表の書き方（CSSを使って）
表を作っています。 何度もチャレンジしながらやりましたが・・ギブアップ・・・分かりません。。わかる方がいらっしゃったら教えてください。 http://hw001.gate01.com/with-flower/tesuto/article04.html (1)1つの枠の中（物件）で区切りに点線を入れたいのですが、どのようにしたらいいでしょうか？ (2)上下に重なった枠線を片方だけにできないでしょうか？ または改行を入れようと思ったのですが、間隔が広すぎておかしくなります。改行幅の指定はできるのでしょうか？ ↓CSS .solid {border-width:1px; border-style:solid; border-color:#330000;} .dashed {border-width:1px; border-style:dashed; border-color:#cccccc;}
- hanapaine
- お礼率71% (60/84)
- Windows XP
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでいかがでしょうか？(2)はソースの45行目に記述されてるtableが、物件１（上段）のみにネストされていたんで、物件2（下段）もくくってしまいましたところ、重なりは解消されたと思うんですが。。。 【html】 <TABLE border="1" cellspacing="0" cellpadding="0" class="solid t2"> <TBODY> <TR> <TD bgcolor="#ffffff"> <TABLE border="0" width="680" class="solid collapse"> <tr> <TD colspan="2" align="center" height="25" class="dashed"><A href="bu-01.html" target="_blank">●●荘</A></TD> <TD colspan="8" height="25" bgcolor="#c1ff84" class="dashed">福岡市XXXXXX</TD> </tr> <TR> <TD align="center" width="68" height="25" bgcolor="#c1ff84" class="dashed">家賃</TD> <TD align="center" width="68" height="25" class="dashed">27,000</TD> <TD align="center" width="68" height="25" bgcolor="#c1ff84" class="dashed">敷金</TD> <TD align="center" width="68" height="25" class="dashed">3ヶ月</TD> <TD align="center" width="68" height="25" bgcolor="#c1ff84" class="dashed">共益費</TD> <TD align="center" width="68" height="25" class="dashed">込</TD> <TD align="center" width="68" height="25" bgcolor="#c1ff84" class="dashed">間取り</TD> <TD align="center" width="68" height="25" class="dashed">１K</TD> <TD align="center" width="68" height="25" bgcolor="#c1ff84" class="dashed">駐車場</TD> <TD align="center" width="68" height="25" class="dashed">無</TD> </TR> </TABLE> </TD> </TR> <TR> <TD bgcolor="#ffffff"> <TABLE border="0" width="680" class="solid collapse"> <tr> <TD colspan="2" align="center" height="25" class="dashed"><A href="bu-01.html" target="_blank">○●荘</A></TD> <TD colspan="8" height="25" bgcolor="#c1ff84" class="dashed">福岡市XXXXXX</TD> </tr> <TR> <TD align="center" width="68" height="25" bgcolor="#c1ff84" class="dashed">家賃</TD> <TD align="center" width="68" height="25" class="dashed">27,000</TD> <TD align="center" width="68" height="25" bgcolor="#c1ff84" class="dashed">敷金</TD> <TD align="center" width="68" height="25" class="dashed">3ヶ月</TD> <TD align="center" width="68" height="25" bgcolor="#c1ff84" class="dashed">共益費</TD> <TD align="center" width="68" height="25" class="dashed">込</TD> <TD align="center" width="68" height="25" bgcolor="#c1ff84" class="dashed">間取り</TD> <TD align="center" width="68" height="25" class="dashed">１K</TD> <TD align="center" width="68" height="25" bgcolor="#c1ff84" class="dashed">駐車場</TD> <TD align="center" width="68" height="25" class="dashed">無</TD> </TR> </TABLE> </TD> </TR> </TBODY> </TABLE> 【css】 .solid {border-width:1px; border-style:solid; border-color:#330000;} .dashed {border-width:1px; border-style:dashed; border-color:#cccccc; padding: 5px;} .collapse {border-collapse:collapse; } う～ん。家賃2.7万円。。。お手頃価格。。。引っ越そうかしら。。。
その他の回答 (1)
- nekonyanko
- ベストアンサー率25% (146/573)
こういう感じではどうでしょう？ <html> <head> <title></title> <style type="text/css"> .solid {border-width:1px; border-style:solid; border-color:#330000;} .dashed {border-width:1px; border-style:dashed; border-color:#cccccc; margin-top:10px; margin-bottom:10px;} </style> </head> <body> <div class="solid"> a </div> <div class="dashed"> </div> <div class="solid"> b </div> <div class="dashed"> </div> </body> </html>
補足
回答ありがとうございます！！ しかし・・・ごめんなさい、私の書き方がおかしかったです^_^; http://hw001.gate01.com/with-flower/tesuto/article04.html ↑ もう一回やり直してます。 この表の中の区切りを点線にしようと思っているのですが・・ （今物件の中に区切りをつけているところ）
お礼
回答ありがとうございました。 最後に"TABLE border="1"（一番外側）だけ変えて、これに決定しました。 tableって奥が深いんだな～って思いました。とても勉強になり助かりました。 また機会あればよろしくお願いいたします。m(_ _"m)