外部CSSを使用して、下のようにtableの幅指定をしているのですが、幅が指定どおりのサイズになりません。windowsXPのIE7で確認しています。
●HTMLソース----------------------------
<?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>
●CSSソース(外部)----------------------------
*{
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"のセルにボーダーが表示されません。CSSの表記の仕方が悪いのでしょうか?わかる方がいらっしゃいましたらよろしくお願いします。
No.2ベストアンサー
- 回答日時:
commentが書かれているセルにCSSでheightを高めに指定すれば、textの部分が小さくなりました。
ご確認下さい。この回答への補足
ご回答ありがとうございました。
どうも、思うように動かなかったので、
kazumeroさんのアドバイスも参考にもう一度
考えたいとおもいます。
ありがとうございました。
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要素内に無意味な空白を入れることなく、ボーダーを表示させることが出来ます。
ご回答ありがとうございます。右側のボーダーは教えていただいたやり方で解決しました。文字などが入っていない時は設定が必要なんですね。ありがとうございます。
上の段の27pxセルですが、画像サイズの指定をはずしてみましたが、IE7でサイズが変わりませんでした。(firefoxで確認してみたところ、こちらは大丈夫でした)念のため、画像をはめこんだものをアップしてみたのですが、やはり直りません。引き続き質問を続けたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
Tableタグで作成した表の縮小
-
td要素内のdiv要素をセンタリン...
-
vbscriptで時計を作りたい
-
テーブルの一部分のセルだけに...
-
テーブルタグの中にdivを含めて...
-
TABLEのセルの中の文字を行単位...
-
CSSで特定のテーブルだけに...
-
テーブルの行を折りたたみたい...
-
DreamWeaverで複数ワードを一気...
-
CSSだけで<table>の<td>や<tr>...
-
チェックボックスが複数チェッ...
-
htmlでテキストを画面の中央に...
-
HTMLで文とテーブルの間が空く。
-
tableでcolspanを使うと次行以...
-
テーブルの位置を細かく指定し...
-
表の中の列の順番を入れ替える...
-
tableの中で<p>タグを使うと…
-
【CSS】左右可変、中央固定の3...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
Tableタグで作成した表の縮小
-
td要素内のdiv要素をセンタリン...
-
Tableタグ内のspan styleが適応...
-
XHTMLに関する質問 順序が逆に...
-
ブラウザによってテーブルのセ...
-
表とリスト(ulとtable)の違い...
-
vbscriptで時計を作りたい
-
formのinputなどの幅100%指定
-
TDタグ内での均等割付の仕方
-
cssで、テーブルのtdの中の文字...
-
センタリングしたページの印刷
-
Firefoxを使ってるのですがズー...
-
divで囲んだ文字が消える
-
Dreamweaver デザインビューの...
-
テーブルの枠線に色が付かない
-
HTMLのテーブルでそれぞれの大...
おすすめ情報