28172 sujets

CSS et mise en forme, CSS3

[Résolu] Points de conduite avec Flex

Bonjour,

je réalise un dev. avec points de conduite dans un tableau (j'ai suivi le travail du livre CSS3 Flexbox). Ça marche pas mal sauf qu'en mettant mon tableau à 100% tout se décale. Je ne vois pas trop comment corriger ce soucis.

Code : 

table {
width:100%;
    tr {display: flex; }
    td {display: flex; flex: 1;}
    td::before {display: block; content:'';flex: 1; align-self: center; border-bottom: 1px dotted $gris; height: 4px;}
}


En image le résultat :
upload/1487593105-14920-capturedaeacran2017-02-20aa13.png

Vous vous doutez que je veux ancrer à gauche le texte Smiley smile

Merci pour votre aide et votre retour !
Bonjour.

À la place de 'td::before', essayez 'td::after'...

Mais personnellement je ne mettrais les points que sur la première colonne, donc :
td:first-child::after

PS : L'accolade fermante de 'table' ne doit pas englober les règles pour les autres balises.

Smiley smile
Modérateur
bonjour,

au vu de l'image et du reset sur display, que deviens l'utilité d'un tableau ou une liste ferait tout aussi bien l'affaire ?

sinon , un flex:1 + margin devrait suffire pour le pseudo il prendra tout l'espace dispos.
pour les td enfants de flex, un flex:1; et ils se partageront à parts égales l'espace disponible sinon attribuer une valeur de flex différente au premier et au second td si le partage ne se fait pas a 50/50 .

ex en tableau ou liste (dl mais ul li + 2enfants ça le fait aussi) http://codepen.io/gc-nomade/pen/ZLdwOL
Bonjour,

et merci pour vos réponses ! Je n'avais pas vu vos messages.
Zelena, ma table englobe car je code en SASS Smiley smile
gcyrillus, ton exemple codepen est exactement ce que je souhaite éviter, c'est à dire avoir le premier td ancré à droite.

Bon eh bien trouvé !


table { width: 100%;
    tr {display: flex; padding:10px 0; text-align: left}
    td {display: flex;  padding:0; text-align: left}
    td:first-child {width: 90%}
    td:last-child {text-align: right; width: 10%; flex-direction: column }
    td:first-child::after {display: block; content:'';flex: 1; align-self: center; border-bottom: 1px dotted $gris; height: 6px;}
}


vala Smiley smile
Modifié par letty (23 Feb 2017 - 09:51)
Sujet clos
Aller à