＆＃8220; width：auto＆＃8221;と同等のCSS宣言はありますか＆lt; table＆gt;要素？

StackOverflow https://stackoverflow.com/questions/1625999

  •  06-07-2019
  •  | 
  •  

質問

＆lt; table＆gt;を作成しようとしています任意のサイズの境界線であっても、特定の幅（たとえば500ピクセル）を超えない。

通常、私が行う場合：

（HTML） 

<div>
  <table>
    <tr>
      <td>This is a test.</td>
    </tr>
  </table>
</div>

（CSS） 

div {
  width: 500px;
}
table {
  width: 100%;
  border: 10px solid #000;
}

最終的に＆lt; table＆gt;になります左右の境界線の半分が＆lt; div＆gt;の外側になるため、幅は510ピクセルです。私が欲しいのは＆lt; table＆gt;です500ピクセル幅の total （つまり、親/コンテナの幅を超えない）です。そのため、左右の境界線はそれぞれ幅10ピクセルで、＆lt; div＆gt; -したがって、テーブルの残りのコンテンツ領域は480ピクセルになります。

この種のことを＆lt; div＆gt;に簡単に行うことができます。 CSS宣言を使用して＆quot; width：auto。＆quot;余分な＆lt; div＆gt;を追加することで、テーブルでそれを偽造できます。その周りで＆quot; width：auto＆quot;を使用します＆lt; table＆gt;ではなく、その＆lt; div＆gt;に境界線を設定します。

しかし、よりエレガントなソリューションが存在することを望んでいます（クロスブラウザでなければなりません）。知らないものはありますか？

役に立ちましたか？

解決

divの幅を480ピクセルに設定し、10ピクセルの境界線を配置します。次に、テーブルの幅を100％に設定します

他のヒント

それが機能するかどうかはわかりませんが、...テーブル自体の代わりに、最初の（左の境界線）と最後の（右の境界線）TD（またはTR）に境界を付けることができますか？それは同じ視覚的な結果を与えるはずです。

それ以外の場合、ラッパーDIVで睡眠をあまり失うことはありません。

クロスブラウザソリューションがあるかどうかはわかりません。 IEボックスモデルは、実際に希望どおりに機能します。要素の幅を宣言すると、それが幅になり、「内部」から減算します。宣言された幅を与えるための要素の幅とパディングマージンとボーダー。

他のすべてのブラウザは反対のことを行います。要素の幅を宣言された幅に設定してから、余白のパディングと境界線を追加します。

IE7とFirefox 3.5でコードをテストしたところ、10pxの黒い境界線でも、幅は500pxに見えます。私が心配するのはFirefoxの古いバージョンです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top