Est-il possible à l'utilisateur de pseudo-élément:after, : - avant) sur la ligne de la table en toute sécurité?

Je veux ajouter un élément en position absolue comme une :after (de :before) d'une ligne de tableau.

Regardez cette http://jsbin.com/IGumoye/5/edit

Je suppose que quand j'ajoute un tel élément moteur de rendu (au moins basé sur Webkit) pense que c'est une cellule de tableau.

:before fonctionne mal dans tous les navigateurs. Mais :après fonctionne très bien sous Firefox et presque bon dans webkit. Dans webkit-il garder les petits espace et fait toute la largeur de la table plus gros.

Est-il possible à l'utilisateur de pseudo-élément:after, : - avant) sur la ligne de la table en toute sécurité? - C'est ce qui me dérange dans webkit.

Comment résoudre ce problème? Et où peut-on lire sur le pourquoi de ce qui se passe?

Mise à JOUR de 1

Solution Possible: Utiliser la première cellule du tableau dans cette ligne comme un hôte pour un élément en position absolue.

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

Mise à JOUR 2

Ok, je crois que j'ai trouvé solution à mon problème initial. Et je suppose il y a peut-être mieux. Mais je voulais faire à l'aide de CSS par un maximum. Problème est de faire un texte statique modifiable et si l'utilisateur clique n'importe où ailleurs - près ce mode d'édition.

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

C'est un problème intéressant, mais il n'est pas clair ce que vous essayez de faire avec la mise en page. Pouvez-vous développer?
Thx. pour votre réponse ci-dessous. Va voir ce que je peux y trouver. J'ai mis à jour la question avec la solution et le problème initial. S'il vous plaît vérifier.
Le script semble bien fonctionner, certainement la bonne approche.

OriginalL'auteur Aleksandr Motsjonov | 2013-10-25

  1. 12

    Dans cet exemple, vous utilisez le ::after et ::before pseudo-éléments à ajouter du contenu avant ou après une ligne du tableau, qui sera essentiellement de briser la disposition de table et de conduire à des résultats imprévisibles.

    Si vous ajoutez le contenu généré par les à une table-cell, les résultats seraient plus cohérentes.

    Il n'y a pas grand chose à se référer à l'exception de la spécification d'origine pour le contenu généré:

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

    En outre, gardez à l'esprit que le moteur de rendu CSS génère anonyme boîtes lors de la création des tables:

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

    Cependant, puisque le contenu généré n'est pas une partie de la DOM, l'ensemble de la table-processus de rendu ne peut probablement pas faire face à l'augmentation des pseudo-élément d'une manière sensible.

    Vous plonger dans un domaine qui n'est pas précisé et tout sera au navigateur.

    En fonction de vos contraintes de mise en page, vous pouvez avoir besoin d'utiliser le JavaScript ou jQuery pour modifier le DOM de la table à l'effet désiré.

    OriginalL'auteur Marc Audet