テーブルのサイズについて。
-
0 名前： ひな ： 2007/03/13（火） 10:59 ID:9EgKdoaW sub-t1
- テーブルのサイズを％で指定しています。
テーブルは二つあって、両方とも縦の幅を50％に指定しました。
本来なら50％、50％でテーブルはくっつくはずですよね。
なのに、間が空いてしまうんです。
マージンのせいかと思ってマージンを０pxに設定してみたのですが、
それでも改善されません。
度々質問すみません。
どなたかご存知の方、ご回答くださると幸いです･･･
-
1 名前： モノ ◆7YMtX/NYmu ： 2007/03/13（火） 10:59 ID:TeHw2026 sub-Cl
- 問題の状態が再現する程度のソースを提示すると、
より的確な回答を得られるかもしれません。
tableのheightを%で指定するとなんかがあったような気がしますが失念
-
2 名前： 匿名 ： 2007/03/13（火） 10:59 ID:9EgKdoaW sub-t1
- ページのソース↓
<BODY>
<div><IFRAME scr="in.html" width="80%" height="50%" frameborder="0"></IFRAME></div>
<div>
<TABLE border="0" height="50%" width="100%" bgcolor="#ffffff">
<TBODY>
<TR>
<TD></TD>
</TR>
</TBODY>
</TABLE>
</div>
</BODY>
スタイルシート↓
iframe{margin: 0px;
position: absolute;
bottom: -1px;
left: 0px;}
table{margin: 0px;
position: absolute;
top: 0px;
left: 0px;}
iframe,table{border: 1px gainsboro dashed;}
スタイルシートの記述は初めてなので自信がないのですが･･･
ちなみに、テーブルの幅も100％にしたのですが、ページいっぱいになりませんでした。
ご回答お願いします。
-
3 名前： ひな ： 2007/03/13（火） 10:59 ID:9EgKdoaW sub-t1
- すみません、上の投稿は私のものです。
記名忘れました；
-
4 名前： アヤ ： 2007/03/13（火） 10:59 ID:I/L72zbC sub-0y
- できれば、全部のソースが欲しかったところですが。
#というか、テーブル二つじゃなく、iframeとtableですよね。
以下は、DTDがHTML 4.01 Transitionalの場合の例です。
適当にいじって使用してください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>タイトル</title>
<style type="text/css">
* {margin:0; padding:0;}
html,body {height:100%;}
iframe {height:50%; width:80%; border:1px gainsboro dashed; border-bottom:none;}
table {height:50%; width:100%; border:1px gainsboro dashed; background-color:#fff;}
</style>
</head>
<body>
<iframe src="in.html" frameborder="0"></iframe>
<table>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
とりあえず、上記のソースから完成系が掴めなかったので、想像で。
iframeとtableを上下に並べただけです。
-
5 名前： ひな ： 2007/03/13（火） 10:59 ID:9EgKdoaW sub-t1
- アヤさま、ご回答ありがとうございます。
インラインフレームとテーブル、というよりテーブル二つ、の方が伝わりやすいかと思いまして･･･
本質的には同じかなと･･･すみません。
できました！ありがとうございます！
paddingとhtml,bodyを入れなかったから出来なかったのでしょうか･･･
何にせよ解決しました。
アヤさま、本当にありがとうございました！
-
6 名前： アヤ ： 2007/03/13（火） 10:59 ID:I/L72zbC sub-0y
- 解決したスレッドですが、参考までに。
IEの場合。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp
上記ページ内の「キャンバスを表示する要素の違い」の部分に説明があります。
「標準準拠モード」と「後方互換モード」での表示の違いについての説明なんですが。
*キャンバス＝ドキュメントのコンテンツを表示するための全領域
標準準拠モードでは、BODY要素が固定されていないため、コンテンツにあわせて領域の大きさが変わります。
つまり、高さの指定されていない「50%」では判断のしようがないですから、tableの親要素に高さ指定をしなければなりません。
#宣言を取ればbody要素が自動的にウィンドウサイズと一緒になるので、指定はいりませんが、それだとhtml文書としてどうかという問題にぶちあたります。HTML 4.01だと宣言必須ですから。
#ちなみにpaddingは、幅が100%にならないってあたりから、勝手にbody要素とかにmarginかpaddingがあるんじゃないだろうかと、推測してつけただけなので、実際にそれが原因だったかは不明です。
