display:table breaking-set Breite/Höhe

Vor kurzem, wie ich mit CSS-Layout mit Tabellen mehr und mehr.

Hatte, wenn ich ein weiteres Problem mit display:table, @vincicat wies darauf hin, dass ein Tabellen-layout hätte die Fähigkeit, brechen Sie die zugewiesenen css -width/height.

Experimentierte ich ein wenig und kam über browser-Inkonsistenzen: http://jsfiddle.net/fabb/WywqB/

display:table breaking-set Breite/Höhe in Chrom

display:table breaking-set Breite/Höhe in Opera

Ist es wahr, dass display:table verändern zugewiesenen CSS - width oder height? Gibt es irgendwelche Quellen, die in den W3C-specs, die besagt, dass (ich habe nichts gefunden, noch nicht)?

Sollte nicht die Browser Verhalten sich gleich? Welcher Browser ist der richtige?

andere Eigenschaften nicht überschreiben sich gegenseitig
Nicht "überschreiben". "break"! In den Tabellen, viele Eigenschaften wie Breite und Höhe, die anders funktioniert als bei nicht-Tabellen.
width/height-Eigenschaft "table" - element sollte nicht unterscheiden sich von einem block-element. andere Sache ist, wenn Sie die display table-cell

InformationsquelleAutor fabb | 2012-01-05

  1. 5

    http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html erwähnt, dass Breite und Höhe der Berechnungen sind unterschiedlich für Tabellen, viele Male.

    In CSS 2.1, die Wirkung von 'min-width' und 'max-width' auf Tabellen, inline-Tabellen, Tabellenzellen, Tabellenspalten und Spaltengruppen ist nicht definiert.

    Hinweis. Werte dieser Eigenschaft [vertical] haben unterschiedliche Bedeutungen im Kontext von Tabellen. Lesen Sie bitte den Abschnitt auf Tischhöhe algorithmen für details.

    [Breite] Gilt: alle Elemente, aber nicht-ersetzte inline-Elemente, Tabellenzeilen und Zeilengruppen

    und so weiter.

    So display:table ist von den gleichen Einschränkungen betroffen wie <table>?
    Ja! Die routine, die die Zeichnung kümmert sich nicht, wenn die Elemente werden als "Tabelle" oder "td", etc, nur was die Art der Darstellung der Elemente ist.
    Ich aktualisiert meine Frage mit einem Vergleich von Chrome und Opera, würden Sie sagen, dass der W3-Spezifikationen erlauben beide Interpretationen?
    Das verwandelt es in eine andere Frage. Aber um Sie zu beantworten, ich denke, dass die Verwendung von display:table und nicht über die Dinge von innen mit display:table-row und table-cell kann nicht spezifiziert Verhalten. Haben Sie überprüft, was passiert, wenn Sie emulieren einen kompletten Tisch?
    Sicher, kein Unterschied: jsfiddle.net/fabb/QfDAW - laut des Artikels, fehlende Tabelle Elemente synthetisiert werden, bei der interpretation der Zeit, wenn einige display:table* Eigenschaft ("anonyme table-Elemente").

    InformationsquelleAutor Mr Lister

  2. 3

    Breite und Höhe sollte GESONDERT betrachtet werden:

    http://www.w3.org/TR/CSS2/tables.html#width-layout

    Table width algorithmen [...]

    CSS definiert nicht ein "optimales" layout für Tabellen, da in vielen Fällen, was optimal ist, ist eine Frage des Geschmacks. CSS Beschränkungen definieren, die Benutzerprogramme müssen es respektieren, wenn die Verlegung aus einer Tabelle. User-agents können nach einem beliebigen Algorithmus Sie dies wünschen, und frei zu bevorzugen, die rendering-Geschwindigkeit über Genauigkeit, außer wenn die "fixed-layout-Algorithmus" ausgewählt ist.

    und

    Tischhöhe algorithmen [...]

    Die Höhe einer Tabelle wird durch die 'height' - Eigenschaft für das 'table' - oder 'inline-table' - element. Der Wert 'auto' bedeutet, dass die Höhe ist die Summe der Zeilenhöhen plus jede Zelle Abstand oder Grenzen. Jeder andere Wert behandelt wird, als ein minimaler Höhe. CSS 2.1 definiert nicht, wie extra Raum verteilt wird, wenn die 'height' - Eigenschaft bewirkt, dass die Tabelle größer zu sein als Sie es sonst wäre.

    So können Sie nicht kontrollieren Sie Ihre Tabellen' heights, aber Sie können Steuern, Ihre breiten, wenn Sie zuweisen table-layout:fixed.

    Ich bin mir ziemlich sicher, dass es in allen Browsern funktioniert (wenn man bedenkt, dass IE8 ist nicht ein browser...)

    InformationsquelleAutor user123444555621

Schreibe einen Kommentar