Quelle est une façon élégante d'implémenter cette table html en utilisant l'affichage css: table + sass?

-3

Quelle est une façon élégante de définir cette table html en utilisant l'affichage css: table + sass? J'ai défini une mise en page de table à l'aide divs avec display: table styles CSS:Quelle est une façon élégante d'implémenter cette table html en utilisant l'affichage css: table + sass?

<div style="display:table"> 
     {{#definitions}} 
     <div style="display:table-row"> 
      <div style="display:table-cell">{{key}}</div> 
      <div style="display:table-cell">{{value}}</div> 
     </div> 
     {{/definitions}} 
    </div>

L'exemple ci-dessus est un modèle de moustache utilisé pour la liaison de données. Je dois déplacer les refs de style à sass. Quelle serait une manière élégante de faire ceci?

Source

2017-02-15 user7242966

si vous downvote alors s'il vous plaît inc lude un commentaire décrivant pourquoi – user7242966

Pourquoi n'utilisez-vous pas simplement un '

' normal? Vous pouvez utiliser '

' pour afficher les données, mais ne les utilisez pas pour les mises en page. Je n'ai pas déprécié. – zgood

Pourquoi ne pas simplement assigner une classe aux éléments comme vous le feriez pour un autre? Qu'est-ce que cela a à voir avec SASS? – Turnip

Répondre

Peut-être que je suis malentendu ce que vous demandez mais vous pouvez le faire avec une seule classe sur l'élément extérieur, puis cibler les éléments enfants avec > à chaque niveau pour vous donner vos lignes et cellules:

.display-table { 
    display: table; 

    >div { 
    display: table-row; 

    >div { 
     display: table-cell; 
    } 
    } 
}

qui générerait le CSS suivant ...

.display-table { 
 
    display: table; 
 
} 
 
.display-table > div { 
 
    display: table-row; 
 
} 
 
.display-table > div > div { 
 
    display: table-cell; 
 
}

<div class="display-table"> 
 
    <div> 
 
    <div>{{key}}</div> 
 
    <div>{{value}}</div> 
 
    </div> 
 
</div>

Source

2017-02-15 19:52:10 Turnip

oui c'est correct ou vous pouvez juste utiliser un '

' et ne pas avoir à écrire de ce lol. Aussi serait mieux pour les lecteurs d'écran et les crawlers web je pense – zgood

@zgood Peut-être que OP exploite les capacités de présentation de 'display: table' plutôt que d'afficher des données tabulaires. Dans ce cas, un '

' ne devrait certainement pas être utilisé. – Turnip

Il affiche les paires {{key}} '' {{value}} ', ce qui correspond aux données – zgood

Quelle est une façon élégante d'implémenter cette table html en utilisant l'affichage css: table + sass?

Répondre

Questions connexes