wake-up-neo.com

Warum TD width funktioniert nicht oder wird nicht befolgt?

Ursprüngliche Frage: Hat HTML <table> eine Standardbreite?

Kürzlich hat jemand irgendwo eine Frage in dieser Richtung gestellt und mich dazu gebracht, mich zu wundern.

Nehmen Sie das zum Beispiel.

http://jsfiddle.net/rqmNY/1/

Wenn Sie in diesem Fall die Breite überprüfen (ich verwende inspect element aus Chrom), wird 100px angezeigt, der wie beabsichtigt funktioniert.

Fügen wir noch ein paar "td" hinzu und wir werden sehen, dass der "td:100px" CSS ignoriert wird.

http://jsfiddle.net/rqmNY/2/

Wie Sie sehen können, ist es jetzt 83px anstelle von 100px, wie ursprünglich beabsichtigt.

Aber nehmen wir an, ich gehe zurück zu weniger TDs (7) und füge jedem TD -Element (500px) eine größere Breite hinzu. Das Ergebnis ist, dass die Breite des td bei 119px hängen bleibt.

http://jsfiddle.net/rqmNY/6/

Nehmen wir zum Schluss an, ich habe eine Tabelle mit einer Breite von 2000px und td mit einer Breite von 100px und viele td-Elemente. http://jsfiddle.net/rqmNY/7/

Jetzt überschreibt die Tabellenbreite die Breite von TD und erweitert die Breite des td auf 222px.

Kann jemand dieses Verhalten erklären?

p.s. Beachten Sie, dass das Inspect Element Tool in allen Fällen anzeigt, dass die Breite immer dem CSS entspricht und nur das Endergebnis nicht korrekt angezeigt wird.

8
He Hui

Ich glaube fest an die Antwort auf diese Frage:

Die Priorität der Breiten, die sich auf TD auswirken, ist 

  1. Tischbreite

  2. Breite des übergeordneten Elements (und wenn nicht, Viewport)

  3. Breite des Elements (TD).

Wenn also die Tabellenbreite eingestellt ist, werden die TDs IMMER an die Breite der Tabelle angepasst. Wenn die Breite jedoch nicht festgelegt ist, entspricht die "Hauptbreite" der Breite des Ansichtsfensters. Wenn der CSS-Code nichts anderes angibt, gilt dies. Und nur wenn die Gesamtbreite der TDs kleiner als die des Ansichtsfensters ist, wird die Elementbreite berücksichtigt.

Bearbeiten

  1. Die Tabellenbreite überschreibt immer die Breite von TD.

  2. Die Angabe TD width wird nur so lange verfolgt, bis sie die Breite des Ansichtsfensters überschreitet, und die Breite des Ansichtsfensters wird als Priorität angenommen.

15
He Hui

Haben Sie versucht, display:inline-block zu Ihrem TD - CSS hinzuzufügen? Dadurch wird der Browser gezwungen, Ihre Breite TD nicht zu ignorieren.

20
Cynthia

Tatsächlich hängt die Tabellenbreite von der Zellenbreite ab, wenn Sie die Tabellenbreite nicht angeben. Wenn Sie jedoch die Tabellenbreite angeben, wird die Breite von td ignoriert. Sehen Sie sich folgendes Beispiel an:

<table>
  <tr>
    <td>Column 1</td>
  </tr>
  <tr>
    <td>Column 2</td>
  </tr>
</table>

Wenn du benutzt 

td { 
  width:500px;
}

dann wird die Tabellenbreite 1000px sein.

Aber wenn Sie verwenden

table {
  width:500px;
} 
td { 
  width:500px;
}

die <td>-Breite wird ignoriert, und die Tabellenbreite wird 500px sein.

1
Md Riad Hossain

Laut w3 Docs Here heißt es: "Wenn keine Breitenangabe vorliegt, wird die Tabellenbreite vom Benutzeragenten bestimmt."

Was ich mir vorstellen kann ist td width ist immer abhängig von der Tabellenbreite. Wenn Sie es angeben oder nicht. Wenn Sie eine Tabelle mit der Breite 500px und jeweils 2 TDs mit der Breite 200px haben. Nach dem Hinzufügen dieser 2 TDs in der Tabelle gibt es jetzt noch 100px, so dass 50px zu beiden TDs hinzugefügt wird, die die ursprüngliche width-Eigenschaft überschreiben. Siehe diesen Link http://jsfiddle.net/rqmNY/7/

0
Raman