Warum wird die Tabellenbreite ignoriert?

7

Ich habe im folgenden Stil geschrieben:

%Vor%

und ich sehe keine Übersteuerungen in Firebug. Trotzdem wird die Tabellenbreite als 812 px berechnet;

Warum?

Aktuelle Seite ist hier (in Russisch): Ссылка

AKTUALISIEREN

Kann ich unsichtbare Wortumbrüche hinzufügen, die zu Wortumbruch und Bindestrich führen würden, wenn nicht genügend Platz und fortlaufendes Wort vorhanden wäre, wenn genügend Platz vorhanden wäre?

    
Suzan Cioc 12.12.2012, 23:41
quelle

6 Antworten

14

Die Breiteneinstellung wird nicht ignoriert; es wird nur überschrieben, durch die minimalen Anforderungen von Zellinhalten. In jeder Spalte bestimmt das längste Wort die kleinstmögliche Breite. Dies entspricht den CSS-Spezifikationen: Für eine Tabelle ist die Eigenschaft width standardmäßig nur eine vorgeschlagene Mindestbreite.

"Kleinstmöglich" ist jedoch relativ. Sie können die Worttrennung auf verschiedene Arten aktivieren. Aber um zu sehen, wohin das führt, können Sie testen, indem Sie das <html> -Tag in <html lang=ru> ändern und die Regel * { -moz-hyphens: auto } zu Ihrem CSS hinzufügen und die Seite in Firefox testen. Sie sehen, dass die Tabelle so formatiert ist, dass die Wörter getrennt sind und die Breite der deklarierten Breite so nahe kommt, wie Sie es erhalten. Es sieht ziemlich schrecklich aus. Die angegebene Breite ist einfach zu klein für den Inhalt.

Alternativ versuchen Sie, table { table-layout: fixed } in CSS zu setzen. Dies wird die Breite verstärken, egal was passiert. Und dadurch wird der Zellinhalt aus den Zellen überlaufen. Ich denke nicht, dass dir das auch gefallen wird.

Ich würde also vorschlagen, dass Sie nicht versuchen, eine so geringe Breite zu erzwingen, sondern die Breite ganz zu entfernen und die Silbentrennung zu aktivieren. Das Ergebnis sieht relativ gut aus. Für die Silbentrennung würde ich vorschlagen, Hyphenator.js zu verwenden, einen JavaScript-basierten Ansatz, der Browser-übergreifend funktioniert; Der CSS-basierte Ansatz hat immer noch eine eingeschränkte Browserunterstützung.

    
Jukka K. Korpela 13.12.2012, 03:55
quelle
6

Ihr Problem wird dadurch verursacht, dass die einzelnen Wörter in jeder Zelle der Tabelle zu lang sind und Sie nicht angegeben haben, wie damit umgegangen werden soll.

Fügen Sie Folgendes hinzu:

%Vor%

Zu Ihrer table.gridtable td -Regel.

    
BenM 12.12.2012 23:54
quelle
2

Dies liegt daran, dass in der Tabelle Wörter enthalten sind, die standardmäßig nicht umgebrochen werden können. Daher kann die Tabelle nicht verkleinert werden. Der Effekt wird auftreten:

%Vor%

Wenn Sie font-size auf 1px setzen, sehen Sie, dass die Breite genau 400 Pixel beträgt.

Allerdings kann in CSS3 die CSS-Eigenschaft word-break damit umgehen.

%Vor%     
MC Emperor 12.12.2012 23:55
quelle
1

Sie können eine Tabelle nicht zu klein für ihren Inhalt machen. Sie könnten versuchen, die Schriftgröße zu reduzieren oder ein anderes Layout auszuprobieren (z. B. weniger Spalten verwenden).

In Bezug auf Ihre aktualisierte Frage: Ja, Sie können unsichtbare Wortumbrüche hinzufügen (hier ein Beispiel: Wie man Leerzeichen für Opera Browser umschließt ), aber das ist wirklich ein letzter Ausweg.

    
jdigital 12.12.2012 23:57
quelle
0

Ihre CSS-Datei könnte bereits white-space: nowrap; definieren, was das Umbrechen von Wörtern verhindern würde.

    
tsnyder 24.03.2015 14:02
quelle
0

Wenn ich dies explizit anwendete, bekam ich das richtige Ergebnis, Breite wurde respektiert, langer Text mit neuen Zeilen und Höhe (stattdessen Breite) entsprechend erweitert.

%Vor%     
David 08.09.2017 09:28
quelle

Tags und Links