- ベストアンサー
ホームページの表作成方法とレイアウト崩れの解決方法
- 住宅やマンションの詳細情報を表で表示するための方法を調べています。tableを使用するとセルとセルが重なって二重線になるため、div要素を使用する方法を試しましたが、Firefoxでのレイアウトが崩れてしまいます。どこを修正すればきれいな表を作成できるでしょうか。
- また、IE7,8,9とFirefox、Chromeでレイアウトが崩れないようにしたいです。アドバイスをお願いします。
- ハッシュタグを5つ作成しますが、内容の詳細がわからないため、適当に作成します。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#1です。再度チャレンジ。 <html> <head> <title>無題ドキュメント</title> <style> table {border: solid 1px #000000; border-collapse: collapse;} td {border: solid 1px #000000;} td.title{background:#ccc;} </style> </head> <body> <table> <tr><td class="title">タイトル欄</td><td>コメント欄</td><td class="title">タイトル欄</td><td>コメント欄</td></tr> <tr><td class="title">タイトル欄</td><td>コメント欄</td><td class="title">タイトル欄</td><td>コメント欄</td></tr> <tr><td class="title">タイトル欄</td><td>コメント欄</td><td class="title">タイトル欄</td><td>コメント欄</td></tr> <tr><td class="title">タイトル欄</td><td>コメント欄</td><td class="title">タイトル欄</td><td>コメント欄</td></tr> </table> </body> </html> #2さん、ありがとうございます。灰色が濃くって気がつきませんでした。 ので、すこし薄くしました。
その他の回答 (3)
- k0021
- ベストアンサー率26% (32/120)
.box{ width: 500px; clear:both;} boxの指定を各行の最初に指定したら。 <dir class="box"> <div class="box1"> タイトル欄 </dir> <div class="box2"> コメント欄 </dir></dir> <dir class="box"> <div class="box1"> タイトル欄 </dir> <div class="box2"> コメント欄 </dir></dir> 指定の中にボーダーの指定が無いよう「既に指定済み上のボーダー（枠線）は指定しません」 記述例 枠線の1行目の2列目の指定「既に指定済み左のボーダー（枠線）は指定しません」。 border-style:solid solid solid none;border-color:black;border-width:1px; 私が参考した内容http://ryuso.info/me/se1/tbl01.htm
お礼
ありがとうございました。 無事に解決する事ができました。
- notnot
- ベストアンサー率47% (4900/10358)
横からコメントですが、Firefoxでもちゃんと表示されますよ。 丸ごとコピペすると、コメントじゃない部分に全角空白が入ってるので、それを消さないとその行がエラーで無視されてるんだと思います。
- DrFell
- ベストアンサー率55% (305/551)
表なのだから表でしましょうよ。そのほうが断然ラクですよ。 <html> <head> <title>無題ドキュメント</title> <style> table {border: solid 1px #000000; border-collapse: collapse;} /* 1重の線はここのborder-collapse: collapse が肝*/ td {border: solid 1px #000000} td.title{background:#333;} </style> </head> <body> <table> <tr><td class="title">タイトル欄</td><td>コメント欄</td><td class="title">タイトル欄</td><td>コメント欄</td></tr> <tr><td class="title">タイトル欄</td><td>コメント欄</td><td class="title">タイトル欄</td><td>コメント欄</td></tr> <tr><td class="title">タイトル欄</td><td>コメント欄</td><td class="title">タイトル欄</td><td>コメント欄</td></tr> <tr><td class="title">タイトル欄</td><td>コメント欄</td><td class="title">タイトル欄</td><td>コメント欄</td></tr> </table> </body> </html> どーしても、divでやりたいなら、<dir>を<div>に直されてもう一度挑戦されるといいと思います。
お礼
具体的なプログラムを作っていただき有難うございます。 さっそく使わせて頂いたのですが、 firefoxでは回りのborderしか表示されず、 中の線が非表示になってしまいます。 IEではちゃんと理想の形になりました。 あと、コードが間違ってましたね。 全然気が付かなかったです。 <dir>を<div>にして表示しました。 しかし、borderが安定しないです。 表を作成する専用のものでないといけないのですね。 firefoxでも中の線がちゃんと表示させる方法は ネットでいくら探しても見つからないところを見ると そんなものはないのですか？ 何か方法はないでしょうか。
お礼
↓のような感じで線を1本で表現することができました。 いろいろヒントを頂き助かりました。 ありがとうございました。 ーーー css ーーー .a { width:500px; border-top:1px solid #000; border-left:1px solid #000; border-collapse:separate; border-spacing:0; cellspacing: 0; } th{ width: 500px; border-right:1px solid #000; border-bottom:1px solid #000; } td { border-right:1px solid #000; border-bottom:1px solid #000; } ーーー HTML ーーー <div class="a"> <table> <tr><th></th></tr> <tr><td></td></tr> </table> </div>