テーブルをブラウザ全面表示

[新着] Webテンプレートを仮オープンしました

0   名前： 幽霊 ： 2006/10/19（木） 17:23  ID:RAU3uEdL
以下のソースをIE6.0で表示したところ、height : 100%で指定しているのにスクロールバーが出てしまいます。
結論から言えば１行目を<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">に変更すれば意図している通り、テーブルを全面表示できるのですが、どうして以下のソースだとできないのか理由が分かりません。
なにとぞご教授ください！

〜ソース〜
<!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=Windows-31J">
<meta http-equiv="content-style-type" content="text/css">
<STYLE type="text/css">
<!--
body,table,td,tr {margin: 0; border: 0; padding: 0}
-->
</STYLE>
<title>サンプル</title>
</head>
<body style="height: 100%; background-color: black; overflow: scroll">
<table style="height: 100%; width: 100%;">
<tr style="height: 70%; background-color: red">
<td>1</td><td>2</td>
</tr>
<tr style="height: 30%; background-color: blue">
<td>3</td><td>4</td>
</tr>
</table>
</body>
</html>
1   名前： さかな ： 2006/10/19（木） 17:23  ID:RKwtsRso
><table style="height: 100%; width: 100%;">の部分を
↓↓↓↓↓↓
<table border="0" cellspacing="0" cellpadding="0" style="height: 100%; width: 100%;">で、だめでしょうか？

2   名前： K+S ： 2006/10/19（木） 17:23  ID:nROqylMa
> （前略）どうして以下のソースだとできないのか理由が分かりません。
Quirk mode と Standard mode で解釈が異なるため。

考えられる策
html {height:100%}
を適用。
3   名前： 点心 ： 2006/10/19（木） 17:23  ID:ad3gQF35
簡単に説明すると、IE6.0はDOCTYPE宣言で表示モードが変わります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
と指定したときは、後方互換モードで表示され、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
と指定したときは、標準準拠モードで表示されます。

このモードの違いでブラウザでの表示にも差が出てきます。その性ではないでしょうか。

※用語がわからない場合は、検索してみてください。
4   名前： 匿名 ： 2006/10/19（木） 17:23  ID:1bOgE5tf
body,table,td,tr {
margin: 0;
border: 0;
padding: 0;
}

ここに、
overflow: auto;
overflow-y:hidden;
を追加。

<body style="height: 100%; background-color: black; overflow: scroll">
の
overflow: scrollは削除。

※overflow: scroll;だと、IE6.0では上手くいかなかったです。
5   名前： 匿名 ： 2006/10/19（木） 17:23  ID:1bOgE5tf
追加
>>4は、>>0を基に、
”スクロールバーが出ない”ようにしてみましたが・・・・
テーブルの”中身”によっては、もう少し適切なやり方があるかもしれません。
6   名前： 幽霊 ： 2006/10/19（木） 17:23  ID:CFKyrcuS
すみません、やりたいことの説明が抜けていました。
テーブルを全画面表示して、表内に大量のデータが
表示され画面に入りきれなくなった時に、独自色の
スクロールバーを用意しようと考えています。
そのためにoverflow: scrollを使用します。
（実際は縦方向(overflow-y)だけになる予定です。）

匿名殿の方法だとでーたが画面をはみ出した時に
スクロールバーが出ないんです･･･。

互換モードで動かせばいいじゃんという話も
あるんですけど、どうせなら今から標準モードで
動かせるようなソースにしておきたいと思いまして
試行錯誤しています。
一覧へ戻る