tableの幅が指定幅になりません

2007/12/24 00:19

このQ&Aのポイント

Windows XPのIE7で、外部CSSを使用してtableの幅を指定していますが、指定したサイズになりません。
テーブルのセルの幅や高さを27pxに指定していますが、大きく表示されます。
最右のセルにはボーダーが表示されません。CSSの表記方法が問題かもしれません。

tableの幅が指定幅になりません

外部ＣＳＳを使用して、下のようにtableの幅指定をしているのですが、幅が指定どおりのサイズになりません。windowsXPのIE7で確認しています。 ●ＨＴＭＬソース---------------------------- <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>***</title> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> </head> <body class="otoiawase"> <div id="main"> <div class="recipie_space_large"> <table> <tr> <td rowspan="2" class="flow_ph"><img src="image/1.jpg" width="140" height="94" /><br /><img src="image2" alt="next" width="140" height="50" /></td> <th><img src="image3.gif" alt="" width="27" height="27" /><b>text</b></th> <td class="freespace" rowspan="2"></td></tr> <tr> <td>comment</td> </tr> </table> </div> </div> </body> </html> ●ＣＳＳソース（外部）---------------------------- *{ margin: 0; padding: 0; } #main .recipie_space_large{ width:730px; } #main .recipie_space_large table{ width:730px; } #main .recipie_space_large table{ border:1px solid #000000; } #main .recipie_space_large table th{ height: 27px; border:1px solid #000000; } #main .recipie_space_large td{ border:1px solid #000000; } #main .freespace{ width:80px; } #main .flow_ph{ width: 150px; } --------------------------------------------- http://www5a.biglobe.ne.jp/~satomi-h/test.html 表示結果↑ 画像が切れていますが、同じ現象です。 textと書いてある部分のセルの幅の高さを27pxにしているのですが、とても大きくなります。class指定にするなどしてみましたが、どれもこのサイズになってしまいます・・・また、tdにボーダーの指定をしていますが、一番右側のclass="freespace"のセルにボーダーが表示されません。ＣＳＳの表記の仕方が悪いのでしょうか？わかる方がいらっしゃいましたらよろしくお願いします。

sanae110
お礼率91% (32/35)

HTML
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

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

ベストアンサー

kazumero
ベストアンサー率40% (20/49)

2007/12/24 02:26 回答No.2

commentが書かれているセルにCSSでheightを高めに指定すれば、textの部分が小さくなりました。ご確認下さい。

質問者

補足 2008/01/26 00:45

ご回答ありがとうございました。どうも、思うように動かなかったので、 kazumeroさんのアドバイスも参考にもう一度考えたいとおもいます。ありがとうございました。

その他の回答 (1)

kazumero
ベストアンサー率40% (20/49)

2007/12/24 00:52 回答No.1

textと書いてある部分のセルの高さが大きいのは、そのセルにある画像のサイズをwidth="27" height="27"　としているからです。このサイズを小さくしたら、高さが小さくなりました。一番右側のボーダーですが、手っ取り早くボーダーを表示させるには全角スペースを<td class="freespace" rowspan="2"></td>内に入れるとよいです。ただ、個人的には無意味なスペースを入れるということで好きではありません。以下、IE、ネスケ、FF、Operaのブラウザのいずれにおいても、枠を表示させることができる方法です。・table 要素内に　frame="void"を挿入 <table frame="void"> ・CSSでempty-cells:show;　と指定する。 #main .freespace{ width:80px; empty-cells:show; } この方法なら、td要素内に無意味な空白を入れることなく、ボーダーを表示させることが出来ます。

質問者

お礼 2007/12/24 01:35

ご回答ありがとうございます。右側のボーダーは教えていただいたやり方で解決しました。文字などが入っていない時は設定が必要なんですね。ありがとうございます。上の段の27pxセルですが、画像サイズの指定をはずしてみましたが、IE７でサイズが変わりませんでした。（firefoxで確認してみたところ、こちらは大丈夫でした）念のため、画像をはめこんだものをアップしてみたのですが、やはり直りません。引き続き質問を続けたいと思います。