プロが教える店舗＆オフィスのセキュリティ対策術

tableにtableをネストした場合

解決済

  • 質問者：As2022
  • 質問日時：
  • 回答数：5件

<!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で見たときには思ったとおりに表示されるのですが・・・。
どなたか原因が分かる方おられましたら教えてください。

通報する

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

質問の本文を隠す

A 回答 (5件)

No.1

  • 回答者： izayoi2004
  • 回答日時：

外tableに余計な行があるではにでしょうか？


この行と
<tr><td></td><td></td><td></td></tr>
この行（但し<tr>はいる）
<tr><td></td><td>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ahoaho3
  • 回答日時：

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



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

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

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

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

No.3

>よく分からない1pxぐらいの隙間


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

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

この回答への補足

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

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

補足日時：2007/09/19 13:54
通報する
    • good
    • 0
    • 件
通報する

No.4ベストアンサー

  • 回答者： 1412lovers
  • 回答日時：

単純に最初のテーブルタグの<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>
    • good
    • 0
    • 件
通報する

No.5

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

    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報