- ベストアンサー
CSS上下に余白なくtableを広げる方法
- WEBサイトをCSSで作成している際、Fire Foxでは表示に問題が発生することがあります。特にtableタグを使用する際には、下部に余白が発生してしまうことがあります。
- この余白を取り除くためには、適切なCSSプロパティを使用する必要があります。具体的には、heightプロパティを100%に設定し、marginプロパティを0に設定することで、上下の余白をなくすことができます。
- ただし、注意点として、Fire Foxのバージョンによっては問題が解決しない場合があります。その場合は、別のブラウザでの表示を検討するか、別の方法でtableを配置することを検討してください。
- 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では一番下に空白ができてしまいました。
お礼
すいません、解決しました。 pタグがあり、ORUKA1951様に教えていただいたこと（親のサイズ参照）から、pタグの高さを100％にすると完成しました。 ありがとうございました