よく住宅やマンションなどの詳細情報をのせるのに、
表が使われていますが、それを作りたいと思っています。
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.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>
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.2
- 回答日時:
横からコメントですが、Firefoxでもちゃんと表示されますよ。
丸ごとコピペすると、コメントじゃない部分に全角空白が入ってるので、それを消さないとその行がエラーで無視されてるんだと思います。
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でも中の線がちゃんと表示させる方法は
ネットでいくら探しても見つからないところを見ると
そんなものはないのですか?
何か方法はないでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの任意の列を非表示に...
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
スタイルシートで colspan=3と...
-
safariで特定条件下でデーブル...
-
ASP GridViewで1レコード2行を...
-
テーブルの入れ子について
-
この出品にある送料表の作り方
-
HTMLで外部ファイルの読み込み
-
テーブルのヘッダとボディの幅...
-
テーブルのレイアウトがおかし...
-
TRタグの余白をcssで設定するには
-
テーブルタグのセルの幅の一部...
-
テーブルの行の高さを指定する...
-
HTML <td></td>タグ セル内余...
-
テーブルの表示がずれます
-
テーブルのセルに画像をピッタ...
-
線が一番細いテーブル
-
逆L字の表(table)組み
-
画像と画像の間の空白
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TRタグの余白をcssで設定するには
-
tableにul,または,olを入れられ...
-
テーブルの任意の列を非表示に...
-
テーブルのヘッダとボディの幅...
-
cssで、表示されるテキストによ...
-
HTML <td></td>タグ セル内余...
-
文字列が入っているtdを削除せ...
-
テーブルのセルに画像をピッタ...
-
テーブルの行を折りたたみたい...
-
テーブルの行の高さを指定する...
-
テーブルの表示がずれます
-
テーブルタグのセルの幅の一部...
-
中に<table></table>が使えるア...
-
逆L字の表(table)組み
-
ホームページ 表の上の余白を...
-
表の中の列の順番を入れ替える...
-
EXCELからhtmlへの変換で罫線が...
-
tableでcolspanを使うと次行以...
-
表の1列だけをCSSを使って右揃...
-
文字の中央そろえを一括で指定...
おすすめ情報