html - 内部 Div の拡大に合わせて HTML 列を広くする

Question

次の点を考慮してください。

<td style="width: 500px;">
    <div style="width: 400px;">SomeContent</div>
</td>

何らかの理由で、div を含む列は、スタイルが示すように 500px に拡張されません。

スタイルで指定している幅を尊重するように td を取得する方法を知っていますか?

Answer 1

理論的には、min-width および max-width スタイルを使用できます。実際には、一部の一般的なブラウザーはこれらのスタイルを無視します。この場合、400 の幅を明示的に宣言したため、子の成長または親の縮小によって影響を受けない限り、常に 400 に等しい必要があります。「サーバー」を実行して、コンテンツのサイズに基づいて幅属性をプログラムで決定するか、オーバーフロー スタイルで遊ぶか、水平スクロールバーを使用してパネルに配置することができます。

Answer 2

TD 内の DIV に固定幅を設定する理由はありません。デフォルトでは、DIV はブロック要素です。つまり、そこに含まれる要素の全幅を埋めます。

TD にパディングを設定するか、DIV にマージンを設定して、同じスタイルを実現します。

さらにマークアップや css を見ないと、TD が 500 ピクセルにならない理由がわかりません。要素に 2 つの異なる背景色を追加すると、TD が div よりも 100 ピクセル広くなることがわかります。

Answer 3

テーブルに幅があり、テーブル内に他の tds がありますか? また、ドキュメントの種類はありますか?

ただし、そうは言っても、ここにあなたの解決策があります：

<td style="width: 500px">
  <div style="padding: 0 50px">SomeContent</div>
</td>

パディングを適切に設定します。

---

あなたの質問を読み直しましたが、これはあなたが探している答えではないかもしれません。もう少し詳しく教えていただけますか？

Answer 4

これを試して：

<td style="width:500px;">
  <div style="width:100%;">SomeContent</div>
</td>

ただし、td を div の正確なサイズ、最大 500px にしたい場合は、次を試してください。

<td style="max-width:500px;">
  <div style="width:100%;">SomeContent</div>
</td>

IE6 は最大幅を認識せず、強制的に 500px にすることに注意してください。