電子書籍の厳選無料作品が豊富!

cssのdivの中にtableタグを入れ子にして作成していますが、中側tableのcellpaddingを5に指定しているにもかかわらず余白があきません。

過去ログにCSSの設計思想からすると、DIVの中にTABLE要素を組み込むことは論理矛盾であると書かれていましたが、複雑な表になってくると知識がないため、テーブルを使っているのが現状です。
なぜ余白があかないのでしょうか?また対応する方法はあれば教えていただきたいです。よろしくお願いします。

<div id="fee_table">
<table width="460" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#C4D6A7"><table width="460" border="0" cellspacing="1" cellpadding="5">
<tr>
<td bgcolor="#FFFFCC">テキスト</td>
<td valign="top" bgcolor="#FFFFFF">テキスト</td>
</tr>
<tr>
<td bgcolor="#FFFFCC">テキスト</td>
<td valign="top" bgcolor="#FFFFFF">テキスト</td>
</tr>
<tr>
<td bgcolor="#FFFFCC">テキスト</td>
<td valign="top" bgcolor="#FFFFFF">テキスト</td>
</tr>
</table></td>
</tr>
</table>
</div>

■---css---------------------------------------■
#fee_table {
font-size: 95%;
margin : 10px 0 10px 15px;
}

A 回答 (3件)

#1、#2です。


> やはりcssと関連しているようです。
ということでしたら、書かれているCSSは
#fee_table {
font-size: 95%;
margin : 10px 0 10px 15px;
}
だけですか?他には何も書かれていませんか?
その辺りを確認されてみてはどうでしょうか。
    • good
    • 0

#1です。


書かれているCSSもそのままで書いてみましたが、やはり5px分文字周りに余白ができます。
(IE6とFirefoxで確認済みです。IE7は確認していません。OSはWindowsです)
試しに「cellpadding="5"」を削除してみるとどうなりますか?
たぶんテーブルに文字がくっついたような状態になると思うのですが。
逆に「cellpadding="20"」としてみるとどうなりますか?

何か他にCSS記述をされていて、それが邪魔をしているのかもしれませんね。

この回答への補足

cellpaddingを削除しても"20"にしても余白が全くない状態です。
しかし、divで囲っていないところにtableを移動すると正常に余白ができます。

やはりcssと関連しているようです。

補足日時:2008/01/16 14:32
    • good
    • 0

参考にあげられている通り、そのまま作成しましたが


「cellpadding」はきちんと5pxあいているようになりましたよ。

cellpaddingは簡単に言うとテーブル内の文字周りの余白になります。
参考:http://www.tagindex.com/html_tag/table/table_cel …

もしかすると、外のテーブルと中のテーブルの間に余白をあけたいということでしょうか。
その際には<table width="460" border="0" cellspacing="0" cellpadding="0">の中の
テーブルの入れ子は推奨できませんが、cellpadding="5"に変更なさってみてはどうでしょう。
ご参考までに。

この回答への補足

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

外のテーブルと中のテーブルの間に余白をあけたいということはなく、文字周りに余白をあけたいのですが、私のほうではなぜか余白があかない状態です。スタイルシートを外すとうまくいくのですが…やはりcss内でtableを使う事自体に無理があるのでしょうか?

テーブルの入れ子を使っているのは内側tableにcellspacing="1"にすることで、セルごとに枠線を付けるためなのです。

補足日時:2008/01/16 09:25
    • good
    • 0

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