Gibt es ein Äquivalent CSS Deklaration „width: auto“ für -Elemente?

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

  •  06-07-2019
  •  | 
  •  

Frage

Ich versuche, ein

zu erstellen, die nicht über eine bestimmte Breite nicht überschreiten (die 500px sagen wir mal), auch mit Grenzen jeder Größe.

Normalerweise, wenn ich tun:

(HTML) 

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

(CSS) 

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

Ich werde mit einem

, um am Ende das ist 510px breit, da die Hälfte der linken und rechten Rand wird bis auf die Außenseite des
beenden. Was ich will, ist ein
, dass 500px breit ist total (das heißt, die nicht die Breite des übergeordneten / Behälter nicht überschreitet). So würde die linken und rechten Ränder jeder sein 10px breit, das in den in 500px weit mit
-. Daher bleiben die übrigen Tisch Inhaltsbereich wäre 480px

Ich kann diese Art der Sache zu einem leicht tun

durch die CSS-Deklaration mit „width:. Auto“ Ich kann es fälschen mit einem Tisch durch eine zusätzliche Zugabe von
um ihn herum, die verwendet „width: auto“ mit der Grenze Satz an diesem
, nicht der

.

Aber ich bin der Hoffnung, dass eine elegantere Lösung besteht (muss Cross-Browser). Gibt es eine, die ich bin mir nicht bewusst?

War es hilfreich?

Lösung

Stellen Sie den div auf 480px breit und legte die 10px Grenze auf sie. Setzen Sie dann die Tabelle zu 100% Breite

Andere Tipps

Nicht sicher, ob es funktionieren würde, aber ... könnten Sie die erste Grenze (linke Grenze) und letzte (rechte Grenze) TDs (oder TR vielleicht) anstelle der Tabelle selbst? Das soll das gleiche visuelle Ergebnis.

Ansonsten würde ich nicht viel Schlaf über einen Wrapper DIV verlieren.

Ich weiß nicht, ob es eine Cross-Browser-Lösung ist. Das IE-Box-Modell tatsächlich funktioniert so, wie Sie wollen würden: sobald Sie die Breite eines Element deklarieren, das ist die Breite, und dann zieht es von der „inneren“ Breite des Elements des padding-Marge und Grenzen Ihnen die angegebene Breite zu geben.

Alle anderen Browser tun das Gegenteil: sie die Elementbreite auf die ausgewiesene Breite gesetzt und dann den Rand Polsterung und Rahmen hinzufügen

.

ich gerade getestet Code in IE7 und Firefox 3.5 und beide erscheinen 500px breit sogar mit dem 10px schwarzen Rand sein. Es ist die älteren Versionen von Firefox Mir würde befürchten.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top