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

解決済

質問者：sanae110
質問日時：2007/12/24 00:19
回答数：2件

外部ＣＳＳを使用して、下のように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-transitio …
<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"のセルにボーダーが表示されません。ＣＳＳの表記の仕方が悪いのでしょうか？わかる方がいらっしゃいましたらよろしくお願いします。

通報する

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

質問の本文を隠す

回答 (2件)

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

No.2ベストアンサー

回答者： kazumero
回答日時：2007/12/24 02:26

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

ご確認下さい。

この回答への補足

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

ありがとうございました。

補足日時：2008/01/26 00:45

通報する

- 0
- 件

通報する

No.1

回答者： kazumero
回答日時：2007/12/24 00:52

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要素内に無意味な空白を入れることなく、ボーダーを表示させることが出来ます。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。右側のボーダーは教えていただいたやり方で解決しました。文字などが入っていない時は設定が必要なんですね。ありがとうございます。

上の段の27pxセルですが、画像サイズの指定をはずしてみましたが、IE７でサイズが変わりませんでした。（firefoxで確認してみたところ、こちらは大丈夫でした）念のため、画像をはめこんだものをアップしてみたのですが、やはり直りません。引き続き質問を続けたいと思います。

通報する

お礼日時：2007/12/24 01:35

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