CSS上下に余白なくtableを広げる方法
- WEBサイトをCSSで作成している際、Fire Foxでは表示に問題が発生することがあります。特にtableタグを使用する際には、下部に余白が発生してしまうことがあります。
- この余白を取り除くためには、適切なCSSプロパティを使用する必要があります。具体的には、heightプロパティを100%に設定し、marginプロパティを0に設定することで、上下の余白をなくすことができます。
- ただし、注意点として、Fire Foxのバージョンによっては問題が解決しない場合があります。その場合は、別のブラウザでの表示を検討するか、別の方法でtableを配置することを検討してください。
- ベストアンサー
CSS 上下に余白なくtableを広げたい
今回、WEBサイトをCSSで作成しているのですが、IEだと予定通りに表示できFire Foxだと表示できないというところで躓いてしまいました。 width: 900px; margin: 0px; height: 100%; min-height: 100%; background-color: #000000; このCSSをtableタグで呼び出しているのですが、Fire Foxだと一番下に空白ができてしまいます。 この空白を取っ払いたいのですが、どのようにすればいいのでしょうか。 ご存じの方がいらっしゃいましたら、ご教示ください。よろしくおねがいします。 Fire Fox Ver.10.0.2
- mogeraccho
- お礼率57% (90/157)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
IEでディスプレイ高さいっぱいに表示される--なんてことはないはずですが？ 確認しましたが、IE6以上は、tableの高さは本来の低いままのはずです。 ・・・ひょっとして互換モード・・・いまどき互換モードでページを作成することはないでしょうが・・・ 本来、tableにしろblockにしろ、{height:100%;}でディスプレイいっぱいに広がるのは誤りです。IEも標準モードだと縦幅いっぱいには広がらないはずです。なぜなら、その親であるhtml,bodyが高さに関してはinline要素のように振舞うべきだからです。 したがって html,body{marin:0;padding:0; /* に加えて */ height:100%; /* を書いておかなければ、子供のblockが参照する箱がなくなります */ } ★通常は行いません。印刷すると・・ 特にデザインのためにtableを使うことはありえませんから、 下記サンプルはHTML4.01strictです。IEを含め標準モードで表示されます。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み ※タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{ margin:0;padding:0; height:100%; } table{ width: 90%;margin:0 auto; min-width:640px; height: 100%; border-collapse:separate; border-spacing:5px; empty-cells:show; background-color:gray; } table th,table td{ background-color:silver; } --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<table summary="test"> ＿＿<tbody> ＿＿＿<tr> ＿＿＿＿<th abbr="row1">一列目</th><th abbr="row2">三列目</th><th abbr="row3">三列目</th> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>1200</td><td></td><td>2800</td> ＿＿＿</tr> ＿＿</tbody> ＿</table> </body> </html>
お礼
ご回答ありがとうございます。 html,body{ margin:0;padding:0; height:100%; } をつけてみても、Fire Foxでは一番下に空白ができてしまいました。
関連するQ&A
- ｃｓｓでのテーブル
初心者です。 本を読みながら、スタイルシートでテーブルを作っているのですが、 左に設置したメニュー(縦に並べたボタン)のテーブルの右側に不要なスペースができ、メニューのテーブルと同じ色になってしまいます。 【内容】 .tdmenu{ vertical-align:top; background-color:#fa8072; width:140px; } p.menu{ font-size:0.75em; margin-left:0; margin-right:0; margin-bottom:50px; margin-top:0; width:140px; background-color:#fa8072; height:2em } これが適応されていると思われます。 回答よろしくお願いします。
- ベストアンサー
- HTML
- ＣＳＳでテーブルを作る方法について
CSSでテーブルを作る方法についてアドバイスお願いします。 今、外CSSで、テーブルを作成しようとしているのですが、cssがhtmlに反映されていないようです。２つボックスを並べたいです。 .box1{ float: left; background-color: #cc0000; width: 200px; height: 200px; } .box2{ float: left; background-color: #d0dcdf; width: 200px; height: 200px; } htmlには、 <div CLASS="box1"></div> <div CLASS="box2"></div> と書きました。 どこが問題なのかどなたかご指摘いただけますでしょうか？
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSについて 入力フォームの上下揃い
CSSについて 入力フォームの上下揃い sample.css @CHARSET "windows-31j"; html,body,div,span,h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-size:100%} html { height:100%; } body { height:100%; } body > #container { height: auto; z-index:0; } #container{ width:780px; margin-top:auto; margin-left:auto; margin-right:auto; margin-bottom:auto; position:relative; min-height:100%; border:1px solid #999; } #header{ margin: 0; padding: 0px 0px 0px 0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } #main{ padding:auto; width:100%; backgruond-color:#87CEEB; z-index:1; } #footer{ position:absolute; bottom:0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } index.html <div id="container"> <div id="header"></div> <div id="main"> <div class="vartical-align"> <form action=""> <input type="text" name="id"> <input type="password" name="pas"> </form> </div> </div> <div id="footer"></div> </div> 上記の用なCSSにて入力フォーム等を、id=main内にて上下中央揃えにしたいのですが どうした良いでしょう？
- 締切済み
- HTML
- CSS、width100％でもできる余白
CSSに関する質問です。 上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。 どうすれば中央の背景を横一杯に広げることが出来るでしょうか？ また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。 コードは以下のとおりです。 HTML <html> <head><link rel="stylesheet" type="text/css" href="css.css" /></head> <body> <div id="header"> <div class="centerbox"> <div id="lang"><ul><li>EN</li><li>CZ</li></div> <div id="logo"></div> <div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div> </div> </div> <div id="contents"><div class="centerbox">contents</div></div> <div id="footer"><div class="centerbox">footer</div></div> </body> </html> CSS body{color:white; width:100%;} .centerbox{width:500px; height:100%;} a:hover{background-color:red;} /*base layout*/ #header{width:100%; height:auto; text-align:center; background-color:black;} #lang{text-align:right;} #lang li{list-style:none; display:inline; margin-left:10px} #logo{float:left; width:150px; height:80px; background-color:white;} #menu{text-aign:right; margin-top:50px;} #menu li{list-style:none; display:inline; margin-left:10px} #contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;} #footer{width:100%; height:100px; text-align:center; background-color:black;}
- ベストアンサー
- CSS
- CSSでテーブルを使わずにレイアウト
以下のソースでなんとかレイアウトできたのですが 左よせではなくセンターよせにしたいのですがどのように記述すればよいでしょうか？CSSの対応していないブラウザの場合にメニューを下部メニューにしたいため p.menu は下部に記述しています。 -- css -- body { width:700px; margin:0px; font-size:12px; color:#ffffff; } p.head { height:15px; margin:0px auto; background-color:#0000ff; } .text { width:500px; text-align:left; margin:0px 0px 0px auto; background-color:#aa0000; } p.menu { width:200px; background-color:#dddddd; position:absolute; left:0px; top:15px; } -- html -- <body> <p class="head"> タイトル </p> <div class="text"> あいうえおかきくけこ </div> <p class="menu"> <a href="">menu1</a> </p> </body>
- ベストアンサー
- HTML
- ＣＳＳの作成方法で
ＨＰ作成、初心者です。ＣＳＳで段組をしました。 現在、下記の状態ですがヘッダーの上にもう１個<DIV>を入れて空白のスペースを作りたいのですが ＨＴＭＬの<ＤＩＶ 外枠><ＤＩＶ ヘッダー>の間にもう一個<ＤＩＶ 空白></ＤＩＶ>を作り ＣＳＳ側で＃空白 { width:900px; height:50px; background-color: #FFFFFF ～にしたいのですが どうしても間に白い背景の空白欄ができません。左サイドにナビを入れているので背景にサイド部分の色つきの背景が全部に入ってます。なので空欄ができても背景が白になりません。また空欄も文字を入れるとプレビューで見れますが、文字なしだと空白欄が形成されません。 外枠 { width:900px; margin-right: auto; margin-left: auto; background-image: url(画像1.jpg); ここが左サイドナビの背景になっている background-color: #FFFFFF; margin-top: 0px; border: 1px solid #060; } #ヘッダー { width:900px; height:130px; background-image: url(画像2.jpg); background-color: #FFF; text-align: center; } どのようにすればいいでしょうか。 初心者なので、この書き方で分かりますでしょうか。 よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- CSSでIE6だけ出る隙間をなくしたい
お世話になります。 CSSとtableを組み合わせてレイアウトをしています。 WindowsのIE7やSafari、Netscapeでは正常に表示されるのですが、 IE6では<div>と<div>の間に1、2pxの白い隙間が出てしまいます。 htmlは下記にアップしています。 http://www.couleurcafe.jp/08/ ホーム、メニューといったメインメニューの行と、 赤地に白文字のヘッダーメニューの行の間に隙間が出てしまいます。 CSSは以下の通りです。 @charset "Shift_JIS"; body { margin: 0; padding: 0; background-image: url(img/bodybg.gif); } #wrapper { width: 780px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; text-align: left; background-color: #FFFFFF; } #mainmenu { background-image: url(img/menubarbg.gif); background-repeat: repeat-x; width: 766px; height:29px; margin-left: 14px; margin-bottom:0px; padding-top:1px; } #menublock { background-image: url(img/menubg.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #000000; text-align: center; height: 16px; padding-top: 12px; } #menublock_over { background-image: url(img/menubg_over.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #FFFFFF; text-align: center; height: 20px; padding-top: 8px; } #headermenu { background-color: #E10C0A; width: 772px; height: 12px; font-size: 11px; color: #FFFFFF; text-align: right; padding: 4px; } この隙間をなくす方法はないでしょうか。 CSSのおかしいところがあればご指摘をお願いいたします。 どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- CSSのレイアウトについて
CSSのレイアウトをダウンロードしました。 初心者ながら調べてやっていたのですが、2点ほど分からない点があります。 ・ヘッダー、フッター含め全ての幅を画面いっぱいにしたい。 widthを100%にしてみたのですが、レイアウトが崩れるだけで画面幅いっぱいにはなりませんでした。 ・3カラムの真ん中を固定幅900pxにしたい。 ご存知の方いらっしゃいましたらご教示ください。よろしくお願いします。 以下がCSSのソースです。 * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #wrapper { width: 922px; } #header { color: #333; width: 900px; float: left; padding: 10px; height: 200px; background: #E7DBD5; } #navigation { float: left; width: 900px; color: #333; padding: 10px; margin: 0px 0px 0px 0px; background: #BD9C8C; } #leftcolumn { color: #333; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 200px; float: left; } #content { float: left; color: #333; background: #F2F2E6; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 460px; display: inline; } #rightcolumn { color: #333; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 200px; float: left; } #footer { width: 900px; height: 200px; clear: both; color: #333; background: #BD9C8C; padding: 10px; }
- 締切済み
- CSS
- CSSでテーブルとボックスをセンタリング出来ない
現在、ホームページを試験的に、試しています。 ページについて、お聞きしたいと思います。 (1)このページの上部にある、「 シルバー背景色のテーブル 」 と、最下部にある、「 ボックス 」 だけ、何故か、センタリング出来ません。 (2)最下部にある「 ボックス 」 の中に、width="780"height="300"のimgを入れてみましたが、CSSで、下記のように、 div#box1{ background-color:#c0c0c0; border:green 5px inset; width:780px; height:300px; margin:100px ; padding:0px 0px 0px 0px; } と記載したにもかかわらず、ボックス内に収まりそうなIMGが、添付画像のように、何故か下にずれてしまっています。 これをぴったり収めることは、可能なのでしょうか？ 詳しい方がいましたら、どこが原因なのか、教えていただきたいと思います。 よろしくお願いいたします。
- ベストアンサー
- ブラウザ
お礼
すいません、解決しました。 pタグがあり、ORUKA1951様に教えていただいたこと（親のサイズ参照）から、pタグの高さを100％にすると完成しました。 ありがとうございました