[RÉGLÉ] Tabulation avec Grid Layout : aligner à gauche la 3° "colonne"

[schtroumph]

Salut

Pour une page j'ai fait mes tabulations avec Grid Layout :

<div class="tabulation">
    <div class="col-01">Vivamus placerat orci</div>
    <div class="col-02"><hr /></div>
    <div class="col-03">Morbi feugiat tortor sed suscipit</div>
</div>

<div class="tabulation">
    <div class="col-01">In augue</div>
    <div class="col-02"><hr /></div>
    <div class="col-03">Vivamus molestie</div>
</div>

<div class="tabulation">
    <div class="col-01">Fusce ullamcorper</div>
    <div class="col-02"><hr /></div>
    <div class="col-03">Vestibulum eget accumsan</div>
</div>

.tabulation {
    display: grid;
    grid-template-columns: auto 1fr 220px;
    grid-template-rows:29px;
}

.tabulation .col-01    {grid-column:1;}
.tabulation .col-02    {grid-column:2;}
.tabulation .col-03 {grid-column:3;}

.tabulation > div {align-self:center;}

.tabulation .col-02 hr {
    border-top:#000 2px dotted;
    width:95%;
}

Pour pouvoir aligner à gauche col-03 je lui ai mis une largeur en px.

Maintenant il me faut des tabulations sur une autre page. Je voudrais donc faire un code général qui sera le même pour toutes les tabulations. Le probleme c'est que la largeur de col-03 ne sera pas la même et je voudrais pouvoir aligner a gauche toutes les tabulations de chaque pages. Comment je pourrais faire pour adapter la largeur de col-03 à son contenu tout en alignant a gauche ?

(voir sur CodePen)

[Eddy.vh]

Salut.

Je me suis amusé à faire une petite mise en page en tabulation avec pointillé ou traits d'union.
Je n'ai pas utilisé Grid Layout mais j'ai un résultat visuel agréable (surtout avec le point de fuite en pointillé)

Voir le résultat

[schtroumph]

J'utilisais le même code avant d'utiliser Grid. Avec Grid c'est responsive.

[Eddy.vh]

Et la pas peut-être ?

[schtroumph]

J'ai écris trop vite et c'est pas se que je voulais (j'aurais du) dire désolé . Oui c'est responsive mais si dans la "première colonne" (banane, safran, etc.) il y a trop de texte, la seconde (les tarifs) ne va pas a la ligne.

[Eddy.vh]

Ah, j'y ai pas pensé. Je vais voir ça.

[schtroumph]

J'ai trouvé comment faire !

Je met le width du hr à auto. Ensuite pour avoir une largeur différente suivant les pages, dans la DIV contenant les tabulations je met une class qui correspond à la page où elles se trouvent. Puis je personnalise la largeur pour chaque page.

Je sais pas si c'est clair . Donc le mieux c'est de voir avec le CodePen que j'ai modifié.

[lomart]

Bonsoir,

Vous perdez le côté sémantique de la liste et le hr a une signification sémantique (https://developer.mozilla.org/fr/doc...TML/Element/hr)

Votre recherche, c'est un peu ceci :

https://up.lomart.fr/demo/action-csv2list

[woluweb]

Un petit codepen ça simplifierait pas la compréhension et les suggestions ?

[Eddy.vh]

woluweb

Un petit codepen ??
Voilà. Mais avec l'action UP de lomart, faut même plus se poser de questions…

[schtroumph]

J'utilise justement UP ! je n'avais pas fait gaffe a cette action. Je vais voir ça et utiliser plutôt UP pour que ça soit plus "propre". Merci pour la suggestion.

[lomart]

Bonjour à tous

Merci Eddy pour le codepen. Mais ma contribution portait plus sur le risque de mauvaise interprétation par les moteurs de recherche.

En dehors du CSS, UP facilite la saisie. J'ai créé la série d'actions csv2xxx pour pouvoir faire un simple copier-coller de tarifs récupérés d'un tableur.

[Eddy.vh]

Et tu as bien raison lomart. Le hr doit être utilisé pour ce dont il est conçu.
La création d'un fichier CSV est simple et rapide et en cas d'édition, j'imagine que ça s'actualise en temp réel (pas testé) par le rechargement de la page. Pas besoin d'éditer l'article.

[lomart]

j'imagine que ça s'actualise en temp réel (pas testé) par le rechargement de la page. Pas besoin d'éditer l'article

Oui, si tu cible un fichier externe
Regardes "Origine et mise en forme des données" sur la démo csv2table. C'est aussi possible sur csv2list (Sources externes), mais l'usage doit être moins fréquent

[schtroumph]

csv2table avec un fichier externe est pas mal car quant il y a beaucoup de données dans un tableau c'est vraiment galère à faire la table en HTML. Là ça simplifie les choses. En tout cas merci pour ce plugin vraiment génial !