[RÉGLÉ] Tabulation en CSS

[schtroumph]

Salut

Pour faire des tabulations en CSS j'utilise cette méthode qui ma été donné il y a longtemps :

HTML :

<ul class="tabulation">
    <li><span>TEXTE</span>
        <span>tarif</span></li>
    <li><span>TEXTE</span>
        <span>tarif</span></li>
    <li><span>TEXTE</span>
        <span>tarif</span></li>
    <li><span>TEXTE</span>
        <span>tarif</span></li>
</ul>

CSS :

ul.tabulation {
    max-width: 40em;
    padding: 0;
    overflow-x: hidden;
    list-style: none;
}

ul.tabulation li:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . ";
}

ul.tabulation span:first-child,
ul.tabulation span + span {
    background-color:$coul-fond-texte;
}

ul.tabulation span:first-child {
    padding-right: 0.33em;
}

ul.tabulation span + span {
    float: right;
    padding-left: 0.33em;
}

Quant je parle de tabulation je parle de ça :

Texte.................Tarif
Texte.................Tarif
Texte.................Tarif
Texte.................Tarif

J'aimerais savoir si depuis le temps il n'existerais pas une balise dédiée à ça (j'ai rien trouvé sur le net). Voir une méthode encore mieux que celle que je vous donne.

[lefabdu51]

salut,
non pas encore . Mais il ya cci en cours d'implementation

https://developer.mozilla.org/fr/docs/Web/CSS/tab-size

Elle permet de jouer sur la taille d'une tabulation en ajustant le nombre d'espaces definisant sa longueur.

[cavo789]

Bonjour

Pourquoi ne pas utiliser les capacités de Flex box css ou encore un container div row avec des div col à l'intérieur. Je pense ici à la structure des 12 colonnes de Bootstrap.

Il ne faut pas oublier le côté responsive lorsqu'on souhaite forcer un layout basé sur des espaces.

[schtroumph]

salut,
non pas encore . Mais il ya cci en cours d'implementation

https://developer.mozilla.org/fr/docs/Web/CSS/tab-size

Elle permet de jouer sur la taille d'une tabulation en ajustant le nombre d'espaces definisant sa longueur.

Pas encore implémenté donc j’évite. Mais merci quant même pour l'info

Bonjour
Pourquoi ne pas utiliser les capacités de Flex box css ou encore un container div row avec des div col à l'intérieur. Je pense ici à la structure des 12 colonnes de Bootstrap.
Il ne faut pas oublier le côté responsive lorsqu'on souhaite forcer un layout basé sur des espaces.

Là par contre c'est interessant. Je vais voir comment mettre ça en place.

Merci a vous deux

[schtroumph]

Comme j'ai commencé a apprendre, il y a quelques mois, Grid je l'ai utilisé pour faire mes tabulations.

Voici ce que j'ai fait :

<div class="horaires-nom-activite horaire-peinture-01"><span class="nom">Dessin et peinture</span><span class="espace"></span><span class="horaire">14h-16h30</span></div>

.horaires-nom-activite {
    display: grid;
    grid-template-columns: auto 1fr 120px;
}

.horaires-nom-activite .nom        {grid-column:1;}
.horaires-nom-activite .espace    {grid-column:2;}
.horaires-nom-activite .horaire {grid-column:3;}

.horaires-nom-activite .nom,
.horaires-nom-activite .horaire    {align-self:end;}

.horaires-nom-activite .espace {border-bottom:#000 2px dotted;}

Mais malgré le fait que .nom et .horaire sont alignés en bas, les pointillés sont un peu trop bas. L’idéal serait qu'ils soit centrés verticalement, mais c'est pas possible avec cette méthode vue que c'est avec un border.

[schtroumph]

Ce matin au réveil j'ai eu une lumière lol . Au lieu d'utiliser un border à .espace j'ai mis un hr.

<div class="horaires-nom-activite horaire-peinture-01"><span class="nom">Dessin et peinture</span><span class="espace"><hr /></span><span class="horaire">14h-16h30</span></div>

J'ai donc supprimé le :

.horaires-nom-activite .espace {border-bottom:#000 2px dotted;}

pour le remplacer par :

.horaires-nom-activite .espace hr {
    border-top:#000 2px dotted;
    width:95%;
}

Le width est a personnaliser.