みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

tableにtableをネストした場合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<style type="text/css">
body{margin:0}
table{border-collapse:collapse}
td{padding:0;}
</style>
</head>
<body>
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td>

<table style="width:100px;height:100px;background-color:#f93;">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td>
a
</td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>

</td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</body>
</html>

以上のソースをIEで見たとき。よく分からない1pxぐらいの隙間が上に開いてしまいます。
FFで見たときには思ったとおりに表示されるのですが・・・。
どなたか原因が分かる方おられましたら教えてください。

投稿日時 - 2007-09-19 12:58:08

QNo.3358428

すぐに回答ほしいです

質問者が選んだベストアンサー

単純に最初のテーブルタグの<tr>-</tr>分の空白ですね。
以下のソース上で、青の部分が最初のテーブルの枠線部分。
上下に少しだけ有る赤の部分が件の空白に当たる部分です。最初の、<tr>~</tr>までを消せば空白も消えます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<style type="text/css">
body{margin:0}
table{
border-collapse:collapse;
padding:0;
border-style: solid;
border-width: 8px;
border-color: blue;
background-color: red;
}
.aaa{
width:100px;
height:100px;
background-color: orange;
}
td{padding:0;}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<table class="aaa">
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td>
<td>a</td>
<td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
</td>
<td></td>
</tr>
<tr><td></td><td></td><td></td></tr>
</table>
</body>
</html>

投稿日時 - 2007-09-19 14:42:31

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.5

TABLEタグなどに頼らず、すなおにposition/floatで位置決めすればいいだけの事。

投稿日時 - 2007-09-19 15:39:04

ANo.3

>よく分からない1pxぐらいの隙間
連続した改行および空白文字は1文字の空白に置換される。
通常次のようなタグの閉じ記号を次の行の頭にして次の開始タグの開始記号に連続させる方法で表示空白に変換される改行を潰す(バッドノウハウ)

<table><tr
><td
></td
></tr
></table>

投稿日時 - 2007-09-19 13:40:16

補足

回答ありがとうございます

ためしにtableに関するタグを以下のようにすべて一行で書いてみたんですが
<table cellspacing="0"><tr><td></td>.....</table>(とっても長い
それでもよく分からない1pxの空白はまだ残ってしまいます

投稿日時 - 2007-09-19 13:54:00

ANo.2

<table cellspacing="0" style="width:100px;height:100px;background-color:#f93;">

cellspacing="0"を追加してください。

思っていることと違っていたらごめんなさい。

タグの組み方(書き方)でおかしいところがあります。
同じものにたいしてCSS設定を二回するのもおかしいと思います。

(タグ打ちのみで行おうとすると間違いに気がつきにくいので、何かソフトを導入して作業してみては如何でしょうか。余談)

投稿日時 - 2007-09-19 13:27:41

ANo.1

外tableに余計な行があるではにでしょうか?
この行と
<tr><td></td><td></td><td></td></tr>
この行(但し<tr>はいる)
<tr><td></td><td>

投稿日時 - 2007-09-19 13:13:00

あなたにオススメの質問