Chrome, Safari ignoriert die maximale Breite in der Tabelle

72

Ich habe HTML-Code wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
    <title></title> 
    </head> 

    <body> 
       <table style="width:100%;"> 
          <tr> 
             <td> 
                <table style="width:100%; max-width:1000px; background:#000099;"> 
                       <tr> 
                           <td> 
                               001 
                           </td> 
                       </tr> 
                   </table> 
               </td> 
           </tr> 
       </table> 
    </body> 
    </html>

Das Problem ist, dass Chrome und Safari ignorieren. "max-width:1000px" Mein Freund hat festgestellt, dass wir dies verhindern können, indem wir "display:block"für die innere Tabelle hinzufügen , und es funktioniert irgendwie.

Ich möchte also wissen, ob es andere Möglichkeiten gibt, dieses Problem zu lösen, und warum geschieht dies?

html google-chrome safari scaling GaGar1n
quelle
Es wurde gerade
repariert

Antworten:

86

Die maximale Breite gilt für Blockelemente . <table>ist weder block noch inline . Mehrdeutig genug? Haha. Sie können verwenden display:block; max-width:1000pxund vergessen width:100%. Chrome und Safari folgen den Regeln!

Bearbeiten Mai 2017: Bitte beachten Sie, dass dieser Kommentar vor 7 Jahren (im Jahr 2010!) Gemacht wurde. Ich vermute, dass sich die Browser im Laufe der Jahre stark verändert haben (ich würde es nicht wissen, ich mache kein Webdesign mehr). Ich empfehle die Verwendung einer neueren Lösung.

Jason
quelle
1
Danke, das hat mir geholfen, aber gibt es eine Quelle, die kompetenter ist als Wiki? Ich versuchte zu finden, konnte aber nicht, würde viel schätzen.
GaGar1n
3
Die Standards der Elemente und so. Entschuldigung, Wiki ist gut für einen kurzen Blick. w3.org/2009/cheatsheet oder einfach nur w3.org insgesamt.
Jason
1
Danke, wusste nicht, dass die maximale Breite nur für Blöcke gilt. Ich wünsche allen Browsern gerenderte Seiten gleich !!
TheGateKeeper
9
Das Spielen mit der displayEigenschaft " Tabellenelemente" scheint hier bei Stack Overflow ein beliebter Ratschlag zu sein. Wenn Sie dies tun, vergessen Sie nicht, dass es sich nicht mehr um eine echte Tabelle handelt. Erwarten Sie alle möglichen Nebenwirkungen.
Álvaro González
6
@RobertSiemer - Kopf- und Fußzeilen, die nicht an der richtigen Position gerendert werden, Spaltenfehlausrichtungen ... Alles, was mit tabellenspezifischen Verhaltensweisen zusammenhängt.
Álvaro González
31

Ich weiß, dass dies für eine Weile und mit einer funktionierenden Problemumgehung beantwortet wurde, aber die Antwort, die besagt, dass dies max-widthnur für Blockelemente gilt und eine Quelle zitiert, die nicht der Spezifikation entspricht, ist völlig falsch.

In der Spezifikation (die CSS 3-Spezifikation für CSS Intrinsic & Extrinsic Sizing bezieht sich auf die CSS 2.1-Spezifikation für diese Regel) heißt es eindeutig:

Alle Elemente außer nicht ersetzten Inline-Elementen, Tabellenzeilen und Zeilengruppen

was bedeuten würde, dass es für Tabellenelemente gelten sollte.

Dies bedeutet, dass das Verhalten von WebKit, Tabellenelemente nicht zu berücksichtigen max-widthoder min-widthzu korrigieren, falsch ist.

Dustinwilson
quelle
1
Die referenzierte Spezifikation sagt auch ungefähr 10 Zeilen später aus. In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.Es scheint mir sowieso ziemlich mehrdeutig zu sein.
Matt
@Matt Ja, wenn Sie bemerken, dass Tabellenzeilen und Zeilengruppen in dieser Liste weggelassen werden. Es bedeutet nur, dass die Spezifikation nicht versucht anzugeben, wie sie sich verhalten soll, wenn sie auf Tabellenelemente angewendet wird. Es gilt immer noch. Vor Opera 15 unterstützte Opera min-width ua für Tabellen.
Dustinwilson
25

Ich denke, was Sie hier suchen, ist: 

table-layout: fixed

Wenden Sie diesen Stil auf die Tabelle an, und Ihre Tabelle berücksichtigt die Breite, die Sie ihr zuweisen.

Hinweis: Wenn Sie diesen Stil direkt in Chromeanwenden, sieht es so aus, als würde er nicht funktionieren. Sie müssen den Stil in Ihrer CSS / HTMLDatei anwenden und die Seite aktualisieren.

Serj Sagan
quelle
Oh wow. Ich wusste nicht, dass Chrome das ignoriert - eines der ersten Dinge, die ich versucht habe. Ich war in den letzten drei Stunden damit beschäftigt, diese Motte ** zu lösen.
Aart den Braber
8

Wickeln Sie den inneren Tisch mit div ein und stellen Sie die maximale Breite auf dieses umhüllende div ein.

Jan Mazánek
quelle
1
Wie oben funktioniert diese Problemumgehung, da <p>Tags und <div>Tags natürlich blockartig angezeigt werden.
Michael Durrant
6

Ich hatte das gleiche Problem. Ich habe eine Tabelle verwendet, um meinen Inhalt auf der Seite zu zentrieren, aber Safari wurde width:100%; max-width:1200pxals Stil ignoriert, den ich auf die Tabelle angewendet habe. Ich habe gelernt, dass wenn ich die Tabelle in ein Div einwickle und den linken und rechten Rand auf Auto auf dem Div setze, sie auf der Seite zentriert wird und die Attribute für die maximale und minimale Breite in Safari und Firefox auf dem Mac befolgt. Ich habe noch nicht Explorer oder Chrome unter Windows überprüft. Hier ist ein Beispiel:

<div style="position:relative; width:100%; max-width:1200px; min-width:800px; margin-left:auto; margin-right:auto">

Dann habe ich den Tisch in der Div verschachtelt ...

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
Cliff
quelle
3
Diese Problemumgehung funktioniert, da <p>Tags und <div>Tags natürlich blockweise angezeigt werden.
Michael Durrant
Wenn ich nicht die maximale Breite, sondern nur die minimale Breite für das Div festlegen möchte, wird die Tabelle zu 100% Breite des Bildschirms, was viel zu groß ist. Irgendeine Idee, wie ich das lösen soll?
Meow
Kein Effekt in Mac Chrome.
2540625
1

Ich bin gerade auf diese Antwort gestoßen, und es ist erwähnenswert, dass laut MDN ( https://developer.mozilla.org/en-US/docs/Web/CSS/max-width ) in der Kompatibilitätstabelle für die maximale Breite Folgendes angegeben ist:

|             Feature  | Chrome        | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
--------------------------------------------------------------------------------------------------------
|applies to <table> [1]| Not supported | (Yes)           | Not supported     | (Yes) | Not supported   |

"[1] CSS 2.1 lässt das Verhalten von max-width explizit undefiniert. Daher ist jedes Verhalten CSS2.1-kompatibel. Neuere CSS-Spezifikationen können dieses Verhalten definieren, sodass sich Webentwickler jetzt nicht auf ein bestimmtes verlassen sollten."

Es gibt einige coole Sachen auf MDN, wie "Fill-Available" und "Fit-Content" - wir können uns auf einige Dinge freuen, wenn sich die Spezifikation stabilisiert und diesbezüglich explizit ist ...

jcuenod
quelle
0

Ich konnte mein Problem mit der Medienabfrage beheben:

ich ersetzte 

max-width: 360px

mit

@media (min-width: 440px) {
    width: 360px;
}
user2908392
quelle
Dies hat keine Auswirkung (Mac Chrome).
2540625
0

Hier ist eine eindeutige Referenz: 10 Details des visuellen Formatierungsmodells (w3.org)

In CSS 2.1 ist die Auswirkung von 'min-width' und 'max-width' auf Tabellen , Inline-Tabellen, Tabellenzellen, Tabellenspalten und Spaltengruppen undefiniert .

Verweise, die zuvor in diesem Thread angegeben wurden, lesen fälschlicherweise "Tabellenzeilen" als "Tabelle". Dieser sagt jedoch wirklich "Tisch". Das ist Teil von CSS2, aber CSS3 bezieht sich auf CSS2 für die Basis von max-width.

Es ist also nur undefiniert und der Browser kann tun, was er will, und es ist unsicher, sich darauf zu verlassen.

Hibou57
quelle