お世話になります。
HTMLに疎いプログラマです。。。
タイトルの通りですが、質問があります。
たとえば
<div>
<table>
</table>
</div>
のように親要素(div)と子要素(table)があるとします。
この時、<table>がものすごく横長の場合(横スクロールが必要なほど)、その横幅に応じて親要素のdivは横に伸びないのでしょうか?
上記のソースにCSSでborderで線を表示してみたのですが、
<table>は横長になっているにもかかわらず、親の<div>は画面内に収まっているのです。
僕の思惑は、<table>が横に伸びればその親要素である<div>も子要素に応じて横に伸びてほしいのですが、、、。
それができる方法があれば教えて頂きたいです。
それは無理だという仕様であればあきらめます。
どうかお願いいたします。
No.1ベストアンサー
- 回答日時:
> <table>がものすごく横長の場合(横スクロールが必要なほど)、その横幅に応じて親要素のdivは横に伸びないのでしょうか?
下記の様なサンプルの場合、
------------------------------------------------------------
【HTML】
------------------------------------------------------------
<div class="hoge">
<table class="hoge_child" summary="hoge">
<tr>
<th>項目名</th>
<td>内容</td>
</tr>
</table>
</div>
------------------------------------------------------------
【CSS】
------------------------------------------------------------
div.hoge {
width: 100px;
border: solid 1px #c00;
padding: 10px 0;
}
table.hoge_child {
width: 200px;
border-collapse: collapse;
border: solid 1px #000;
}
table.hoge_child th,
table.hoge_child td {
border: solid 1px #000;
}
------------------------------------------------------------
IE6では親要素の"width: 100px;"を無視して子要素の"width: 200px;"に引っ張られて親要素div.hogeも伸びてしまいますが、Firefox等では質問者様がご覧になった様な状態(div.hogeはあくまで"width: 100px;"でレンダリングされ、table.hoge_childはdiv.hogeの枠をはみ出して表示される)になりますね。
環境によって解釈が違います。
親要素の幅を子要素に依存したいのであれば、親要素の幅を決めない事です。div.hogeにwidthが指定されていなければ、div.hogeは子要素table.hoge_childの長さに合わせて伸びますので。
すみません><ブラウザを記していませんでした。
僕が確認したのはFireFox3です。
abrilさんのおっしゃるとおり、IEとFireFoxとで挙動が異なりました。
とても参考になりました。ありがとうございます!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- Excel(エクセル) エクセルのグラフに上下限値の横棒を表示させたい 5 2022/12/12 11:09
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
CSSで特定のテーブルだけに...
-
HTML5で、テーブル内tdタグの高...
-
テーブルとテーブルの間隔について
-
<th>タグを使っても太字にしな...
-
検索窓の位置を指定する方法
-
同じ幅指定のつもりなのに、ブ...
-
▲▲HTML・CSS TABLEから文字が...
-
ホームページのテキストを折り...
-
HPに縦の罫線を入れる方法
-
<fieldset>タグについて
-
ラインを端から端まで画面いっ...
-
tableタグでwidthとheightを100...
-
HTML tableのセルにtextareaを...
-
テーブルデータを折り返して表...
-
テーブル内のセル間にスペース...
-
HTMLでテーブルをfloatで中央配...
-
tdの中のtableの中のtd
-
親要素のwidthは子要素のwidth...
-
テーブル幅が固定できない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
table表を横に並べる際の間隔指定
-
HTML5で、テーブル内tdタグの高...
-
HTML tableのセルにtextareaを...
-
(HTML)Tableを任意の位置に置...
-
同じ幅指定のつもりなのに、ブ...
-
<fieldset>タグについて
-
画面幅に合わせてテーブルのカ...
-
tableを縦に続けるとtable間の...
-
html5のテーブル内でdivのタブ...
-
テーブル内のセル間にスペース...
-
ホームページのテキストを折り...
-
TR タグの表示・非表示を一括で...
-
tableの位置がIEとその他ブラウ...
-
textareaの外側の文字が下付き...
-
テーブルの高さを100%にしたけ...
-
ラインを端から端まで画面いっ...
おすすめ情報