ホームページにのせる表（内側の枠が一本線）の作り方

解決済

質問者：orehatens
質問日時：2011/01/12 19:08
回答数：4件

よく住宅やマンションなどの詳細情報をのせるのに、
表が使われていますが、それを作りたいと思っています。

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;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： DrFell
回答日時：2011/01/13 20:28

#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さん、ありがとうございます。灰色が濃くって気がつきませんでした。
ので、すこし薄くしました。

- 0
- 件

通報する

この回答へのお礼

↓のような感じで線を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>

通報する

お礼日時：2011/01/18 21:35

No.3

回答者： k0021
回答日時：2011/01/13 07:59

.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

- 0
- 件

通報する

この回答へのお礼

ありがとうございました。
無事に解決する事ができました。

通報する

お礼日時：2011/01/18 21:36

No.2

回答者： notnot
回答日時：2011/01/13 01:37

横からコメントですが、Firefoxでもちゃんと表示されますよ。

丸ごとコピペすると、コメントじゃない部分に全角空白が入ってるので、それを消さないとその行がエラーで無視されてるんだと思います。

- 0
- 件

通報する

No.1

回答者： DrFell
回答日時：2011/01/12 19:54

表なのだから表でしましょうよ。

そのほうが断然ラクですよ。
<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>に直されてもう一度挑戦されるといいと思います。

- 0
- 件

通報する

この回答へのお礼

具体的なプログラムを作っていただき有難うございます。
さっそく使わせて頂いたのですが、
firefoxでは回りのborderしか表示されず、
中の線が非表示になってしまいます。
IEではちゃんと理想の形になりました。

あと、コードが間違ってましたね。
全然気が付かなかったです。
<dir>を<div>にして表示しました。
しかし、borderが安定しないです。
表を作成する専用のものでないといけないのですね。

firefoxでも中の線がちゃんと表示させる方法は
ネットでいくら探しても見つからないところを見ると
そんなものはないのですか？

何か方法はないでしょうか。