• ベストアンサー

HTMLで100%のテーブルを確実に表示させる方法?

みなさまお世話になっております。 現在HTMLにてテーブルを組み、 table height="100%" と指定しどんなにブラウザの画面を上下に延び縮みさせてもいつも上下一杯に表示させたいのですが、 なぜか少しだけテーブルの下の部分が100%表示されず困っています。 いつもテーブルを100%表示されるようにするテクニックなどがあれば教えてください。

  • nievez
  • お礼率62% (107/170)
  • HTML
  • 回答数1
  • ありがとう数4

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

  • ベストアンサー
  • qaaaq
  • ベストアンサー率10% (2/19)
回答No.1

スタイルシートを使って <style type="text/css"> body{margin:0; padding:0; height:100%;} table{margin:0; height:100%;} </style> このようにしてはいかがでしょう?

nievez
質問者

お礼

おーーーー!いきなり解決しました。 こんな簡単にできるなんて。 本当にありがとうございました。

関連するQ&A

  • HTMLでテーブルを表示させようとしています。

    HTMLでテーブルを表示させようとしています。 画像のような勤務状況がわかるテーブルをHTMLで表示させようとしています。 テーブルの数字項目は時刻を表しています。(9から18まであります) ブラウザの横スクロールは表示させたくないので テーブル内の一部項目(「No.」から「氏名」まで)を固定にして 横スクロールバーを表示させたいのです。 縦スクロールのサンプルを見つけ、 これを横に対応させればよいかと思ったのですが うまく表示させることが出来ませんでした。 一部項目を固定にして横スクロールバーを表示することは可能なのでしょうか?

    • ベストアンサー
    • HTML
  • テーブルの横幅を常にブラウザ一いっぱいに表示するに

    テーブルの横幅を常にブラウザ一いっぱいに表示するには? たとえば *********************************************** <HTML> <HEAD> <TITLE>test</TITLE> </HEAD> <BODY> <table border=1 cellspacing=0 cellpadding=0> <caption>キャプション</caption> <tr> <td>内容1</td> <td>内容2</td> </tr> </table </BODY> </HTML> *********************************************** を作ると、画像のようにコンパクトに表示されてしまいます。 やりたい事はブラウザの横幅が 10cmなら画面いっぱいテーブルを表示させて、 20cmなら画面いっぱいにテーブルを表示させたいです。 <table border=1 cellspacing=0 cellpadding=0 width="2000"> するとはみ出してしまうし、 <table border=1 cellspacing=0 cellpadding=0 width="1000"> だと小さすぎます。 誰がどのブラウザで開いても、横幅は画面いっぱいに入るように表示するにはどういうタグを書けばいいのでしょうか?

    • ベストアンサー
    • HTML
  • HTMLのテーブル表示

    自分でHTMLを記述して作成したHPがあるのですが、先日から一部のテーブルの表示がおかしくなりました。 無料サーバーの広告等は一番下に表示されていたのに、テーブルの途中に入ってきてそれ以降のテーブル、コードは表示されなくなりました。 ソース自体は大して更新などもしてないです。 改めてコードを見直しても、何故表示されないのか分かりません。 初心者でソースなども稚拙で醜いかもしれませんが、右クリックの『ソースの表示』などで見ください。よろしくお願いしますm(__)m

  • HTMLのテーブル表示について

    HTMLでテーブルを作成していますが、意図した表示形式と違ってしまいす。 <tabele> <tr> <td>一時間目</td> <td>国語</td> </tr> <tr> <td>二時間目</td> <td>数学</td> </tr> </table> <ブラウザに表示したい形式> 一時間目 国語 二時間目 数学 <実際に表示させると・・・> 一時間目 国語 二時間目 数学 となってしまいます。 どかが違うのでしょう?? ブラウザはgooglechromeで表示させています。

    • ベストアンサー
    • HTML
  • テーブルの表示方法

    初心者ですが宜しくお願いします。 テーブルサイズ縦700横400にて ブラウザのサイズを問わずに上下左右で真ん中に 表示するタグを教えて下さい。

  • HTML、CSSについて。テーブル背景がズレる。

    こんにちは。よろしくお願いします。 HTMLとCSS、2つのファイルを作成しています。 HTMLでテーブルを作成し、<td><div=名前></div></td> として、テーブルの中身はCSSにまかせています。 複数列、複数行ありますがdiv名はひとつずつ違うのが付いています。 CSSでは、 div#名前 { width: 20px; height: 20px; margin: 0px; padding: 0px; background: url(画像名.gif); }   ・   ・   ・ htmlを表示させてはcssのpxを調節し、 きれいな背景画像付きのテーブルが完成した!と思ったのですが、 ブラウザの文字サイズを最大に変更すると崩れてしまいました。 pxではなくて%で指定してみても崩れます。 解決策をご存知の方、教えてくださると有難いです。 よろしくお願いします。

  • footer部分をheight:100%にするには?

    現在制作しているウェブサイトのfooter部分をheight:100%にしたいのですが、どうしたらいいのかわかりません。 どのようなサイズのブラウザで見てもfooter部分の背景が画面下いっぱいまで表示されるようにしたいのですが、どうしたらよいのでしょうか? 組み方はテーブルコーディングではなく、完全cssでレイアウトしています。 footer部分にcssでheight:100%を指定しても変わりませんし、htmlタグとbodyタグにheight;100%を指定しても、footer部分がやたら長くなってしまうし、もうどうしたらいいのか・・・ ご存知の方がいらっしゃいましたら、教えてください!!

    • ベストアンサー
    • HTML
  • 本文を、縦幅いっぱいに表示させるには?

    本文を、縦幅いっぱいに表示させるには? Tableタグを使い、画面いっぱいに内容を表示させるHTMLを作りたいと思っています。 横幅は、画面いっぱいに表示できました。 しかし縦幅が画面いっぱいに表示できず、困っています。 内容は、「ヘッダ部・本文・フッダ部」という、3段構成のHTMLです。 ヘッダ部は、画面上部に50ドット。 フッダ部を、画面下部に50ドット。 そして、残りの全領域を、本文の表示に充てたいのです。 つまり、↓こんな感じにしたいのです。 ―――――――――――― ヘッダ部 ―――――――――――― 本文 (以下、余白)    ・    ・    ・    ・    ・    ・ ―――――――――――― フッダ部 ―――――――――――― しかし、実際には、↓こんな感じに表示されてしまいます。 ―――――――――――― ヘッダ部 ―――――――――――― 本文 ―――――――――――― フッダ部 ―――――――――――― (以下、余白)    ・    ・    ・    ・    ・    ・ TableタグのHeight属性を100%にすればうまくいきそうな気がするのですが…何がいけないのでしょう? また、テーブルの上下左右に、若干の余白が表示されてしまいますが、この余白もできればなくしたいと思っています。 方法をご教授いただけないでしょうか。よろしくお願いします。 以下、HTMLコードです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"> <html> <head><title>てすと</title></head> <body> <table width="100%" height="100%" border="1"> <tr height="50"><td>ヘッダ部</td></tr> <tr><td>本文</td></tr> <tr height="50"><td>フッダ部</td></tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • テーブルの横幅を固定しながら高さをリサイズしたい

    はじめまして。いつも拝見させております。 業務でHTMLを扱っております。 以下の件、どうしても煮詰まってしまったため、質問させていただきます。 有識者の方々の知恵をお借りできれば幸いです。 【やりたいこと】 (1) 下記のようなHTMLで、テーブルの横幅を100%に固定したまま、画面リサイズ時に高さをリサイズして表示したい。 (2) リサイズ時の高さは、上下の空白を除いた高さとしたい(常にテーブル全体を画面に表示したいため) (3) (2)が難しいようであれば、固定の高さ(100px程度)を差し引いてテーブルの高さをきめる方法でもよい 【現状】 ・ 下記のソースで、上記を実現することができず煮詰まっております。 ・ 有識者の方々のご教授、どうかよろしくお願いいたします。 【質問対象のソース】 -- HTMLファイル -- <HTML> <HEAD> <!-- JQueryとCSS指定 -- > </HEAD> <BODY> <TABLE class ="SHOW_TEXT" border="1" width = "100%" height = "900px"> <TR> <TD> サンプル </TD> </TR> </TABLE> <FORM> <INPUT TYPE="button" VALUE="閉じる" onClick="window.close()"> </FORM> </BODY> </HTML> --JSファイル-- $( window ).resize(function(){ /* ヴィンドウの高さを取得 */ var height = ""; height = document.body.clientHeight; /* 空白分(100px)を差し引いてリサイズしたい高さを設定 */ var resized_height = ""; resized_height = height - 100; /* オブジェクトの属性変更 */ $('SHOW_TEXT').attr('height', resized_height); }); 以上、よろしくお願いいたします。

  • 各ブラウザで表示されるテーブルの高さを統一したい。

    adobe goliveでサイトを作っています。 テーブルの高さを100%にして ブラウザ画面いっぱい(高さ)にテーブルを表示させたいのですが Explrerでは表示されるのですが Operaではpixelでないと高さ調節ができません。 …何とかなりませんか;教えてください。

    • ベストアンサー
    • HTML

専門家に質問してみよう