Kann das Pseudo-Element (: after,: before) in der Tabellenzeile sicher verwendet werden?

Question

Ich möchte absolut positionierte Element als :after (:before) einer Tabellenzeile hinzufügen.

Schauen Sie sich das http://jsbin.com/IGumoye/5/edit

Ich gehe davon aus, dass, wenn ich Rendering-Engine ein solches Element hinzufügen (zumindest Webkit basiert) denken, dass es eine Tabellenzelle irgendeiner Art ist.

:before funktioniert in allen Browsern schlecht. Aber: nach funktioniert es sehr gut in Firefox und fast gut in Webkit. Im Webkit wird wenig Platz benötigt und die gesamte Tischbreite vergrößert.

- Das ist es, was mich in Webkit stört.

Wie behebt man das? Und wo kann ich lesen, warum es passiert?

UPDATE 1

Mögliche Lösung: Verwenden erste Tabellenzelle in dieser Zeile als Wirt für absolut positionierten Element.

http://jsbin.com/IGumoye/10/edit

UPDATE 2

Ok, ich glaube, ich Lösung für mein erstes Problem gefunden. Und ich nehme an, dass es vielleicht bessere gibt. Aber ich wollte CSS maximal verwenden. Problem ist - machen Sie statischen Text editierbar und wenn der Benutzer irgendwo anders klickt - schließen Sie diesen Bearbeitungsmodus.

http://jsbin.com/IGumoye/23/edit

Answer 1

In diesem Beispiel verwenden Sie die ::after und ::before pseudo-Elemente Inhalt nach oder vor einer Tabellenzeile hinzuzufügen, die im Wesentlichen das Tabellenlayout brechen und zu unvorhersehbaren Ergebnissen führen.

Wenn Sie den generierten Inhalt zu einer Tabellenzelle hinzufügen würden, wären die Ergebnisse konsistenter.

Es gibt nicht viel zu verweisen die ursprüngliche Spezifikation für generierte Inhalte auszunehmen:

http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#before-after-content

Darüber hinaus beachten Sie, dass die CSS-Rendering-Engine anonyme Boxen erzeugt, wenn Erstellen von Tabellen:

http://www.w3.org/TR/2009/CR-CSS2-20090908/tables.html#anonymous-boxes

Da generierter Inhalt jedoch nicht Teil des DOM ist, kann der gesamte Tabellen-Rendering-Prozess wahrscheinlich nicht mit dem zusätzlichen Pseudo-Element in a umgehen vernünftigerweise.

Sie tauchen in einen Bereich ein, der nicht gut spezifiziert ist, und jede Unterstützung wird browserspezifisch sein.

Abhängig von Ihren Layoutanforderungen müssen Sie möglicherweise JavaScript oder jQuery verwenden, um das DOM der Tabelle auf den gewünschten Effekt zu ändern.