よく住宅やマンションなどの詳細情報をのせるのに、
表が使われていますが、それを作りたいと思っています。
tableを使うとセルに枠が出来てしまいセルとセルが重なり二重線になってしまいます。
一本線にする方法を探しましたがjavascriptを使ったものが多く難しくtableは諦めました。
その代わりにdivのネストによる作成方法を見つけました。
http://www.2step-css.com/Begin/step5/item_143.html
この方法を参考に作成しました。
しかし、firefoxで見てみるとレイアウトはぐちゃぐちゃ。
その下にあるフッター部分までレイアウトが崩れてしまいました。
参考通りに作ったつもりでしたが、
何が悪いのでしょうか?
きれいな表を作るにはどこを直せばいいでしょうか。
あと、IE7,8,9とfirefox、Chromeでレイアウトが崩れないようにしたいです。
アドバイスを下さい。お願いいたします。
------------ html -------------
<dir id="box">
<div class="box1">
タイトル欄
</dir>
<div class="box2">
コメント欄
</dir>
<div class="box1">
タイトル欄
</dir>
<div class="box2">
コメント欄
</dir>
<div class="box1">
タイトル欄
</dir>
<div class="box2">
コメント欄
</dir>
<div class="box3">
</dir>
</dir>
<dir id="box0">
<div class="box1">
タイトル欄
</dir>
<div class="box2">
コメント欄
</dir>
<div class="box3">
</dir>
</dir>
------------ css -------------
#box{
width: 500px;
border: 2px #000;
}
#box0{
width: 500px;
border: 2px #000;
}
.box1{
width: 246px;
height: 60px;
background-color: #333;
color: #fff;
border: 2px #000;
float: left;
}
.box2{
width: 246px;
height: 60px;
background-color: #fff;
color: #000;
border: 2px #000;
float: left;
}
.box3{
clear:both;
}
No.1
- 回答日時:
表なのだから表でしましょうよ。
そのほうが断然ラクですよ。<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でも中の線がちゃんと表示させる方法は
ネットでいくら探しても見つからないところを見ると
そんなものはないのですか?
何か方法はないでしょうか。
No.2
- 回答日時:
横からコメントですが、Firefoxでもちゃんと表示されますよ。
丸ごとコピペすると、コメントじゃない部分に全角空白が入ってるので、それを消さないとその行がエラーで無視されてるんだと思います。
No.3
- 回答日時:
.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
参考URL:http://ryuso.info/me/se1/tbl01.htm#a_b3
No.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さん、ありがとうございます。灰色が濃くって気がつきませんでした。
ので、すこし薄くしました。
↓のような感じで線を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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
便箋風の罫線
-
テーブルの行を折りたたみたい...
-
ASP GridViewで1レコード2行を...
-
widthを指定しない<td>が幅をシ...
-
tableにul,または,olを入れられ...
-
htmlで数字に○を付与したいが出...
-
tableの中で<p>タグを使うと…
-
HTMLの表で幅を指定しても折り...
-
Htmlのtd要素の中で半角の空...
-
値が0なら非表示にしたい
-
ホームページビルダ14で、表の1...
-
文字の中央そろえを一括で指定...
-
cssでテーブルの位置を設定する...
-
Safariでテーブルのセルの高さ...
-
テーブルの表示がずれます
-
表の中の列の順番を入れ替える...
-
DreamWeaverで複数ワードを一気...
-
エクセルをhtml変換した、html...
-
HTMLのrowspan
-
nowrapを指定しても改行される...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
テーブルのヘッダとボディの幅...
-
テーブルの任意の列を非表示に...
-
cssで、表示されるテキストによ...
-
ホームページ 表の上の余白を...
-
tableでcolspanを使うと次行以...
-
中に<table></table>が使えるア...
-
html・cssで日付をキレイに揃え...
-
テーブルの行の高さを指定する...
-
テーブルタグのセルの幅の一部...
-
文字列が入っているtdを削除せ...
-
逆L字の表(table)組み
-
テーブルのセルに画像をピッタ...
-
EXCELのセル内にHTMLタグを含む...
-
テーブルタグの中に<ol><li>を...
-
HTML <td></td>タグ セル内余...
-
テーブルの表示がずれます
-
テーブルの装飾
おすすめ情報