内部Divが拡大するにつれてHTML列を広くする

Question

次のことを考慮してください：

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

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

スタイルで指定している幅をtdに反映させる方法を知っていますか？

Answer 1

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

Answer 2

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

しかし、それはあなたの解決策です：

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

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

---

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

Answer 3

これを試してください：

<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はmax-widthを理解せず、単に500pxに強制することに注意してください。

Answer 4

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

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

さらにマークアップやcssが表示されない場合、TDが500pxにならない理由はわかりません。2つの異なる背景色を要素に追加すると、TDがdivよりも100px広くなることに気付きます。