Tableau CSS (display : table, etc) : style d'une ligne du tableau

Bonjour,

Je souhaite créer un positionnement de <div> en tableau, pour cela j'utilise la propriété display avec les valeurs table, table-row et table-cell. Cela positionne bien les éléments en colonnes indépendamment de la longueur de leur contenu. J'aimerais appliquer divers éléments de style aux lignes du tableau (bordure, couleur de fond, etc..), mais la propriété display:table-row empêche l'application de ces styles ! Comment puis-je procéder ?

Merci d'avance

Voici mon code d'exemple :

<div class="list">
    
      <div class="item">
        <div>Name 1</div>
        <div>Value 1</div>
        <div>Extra 1</div>
      </div>
      
      <div class="item">
        <div>Name 2</div>
        <div>Value 2 - longer</div>
        <div>Extra 2</div>
      </div>
      
      <div class="item">
        <div>Name 3 - longer</div>
        <div>Value 3</div>
        <div>Extra 3</div>
      </div>
    
    </div>

*,body{
      margin : 0;
      padding : 0;    
    }
    
    .list{
      display : table;
      margin : 10px;
    }    
    .list .item{
      /*display : table-row;*/
      border : solid 1px #fef239;
      background-color : #fefabc;
      padding : 5px 10px 5px 5px;
      margin-bottom : 5px;
      margin-right : 5px;
    }    
    .list .item div{
      display : table-cell;
      padding-left : 5px;
    }

Bonjour,

Pour créer un tableau, il faut utiliser les balises propres à la création de tableau <table> <tr> <tr>...

C'est une toute aussi mauvaise pratique que d'utiliser des tableau pour la mise en page que d'utiliser des div pour faire un tableau de données.

À lire absolument : Arrêtons de remplacer systématiquement les tableaux par des div !

Bonjour,

Laurie-Anne a écrit :
C'est une toute aussi mauvaise pratique que d'utiliser des tableau pour la mise en page

(sauf quand c'est la moins pire des solutions mais c'est effectivement un cas très particulier)

biibox> quelle information souhaites-tu mettre en page ? Parce que présenté sous la forme Name + Value + Extra, tu pourrais bien être en train de styler des colonnes/lignes de données en relation avec un entête ... un tableau de données donc.

Bonsoir, merci pour vos réponses.

Il semblerait que mon exemple prête à confusion, car en réalité les données des "cellules" ne sont pas des données tabulaires, mais je souhaite quand même utiliser une présentation propre en colonnes. En gros ce sont des résultats de recherche, avec des images, du texte et des liens, comme une sorte de liste verticale.

Voici la liste avec les styles "display:table", en version brute :



Et voici la liste sans les styles "display:table", mais avec les bordures, etc. il manque juste l'aspect colonne :

Dans ce cas, utilise des listes.

<ul> 
  <li> 
    <span>Name 1</span> 
    <span>Value 1</span> 
    <span>Extra 1</span> 
  </li> 
  <li> 
    <span>Name 2/span> 
    <span>Value 2 - longer</span> 
    <span>Extra 2</span> 
  </li>
   <li> 
    <span>Name 3/span> 
    <span>Value 3 - longer</span> 
    <span>Extra 3</span> 
  </li>        
</ul> 

Tu pourras donner à tes span un display bloc, avec une largeur et un float left.

Si j'utilise des float, je devrai donner des tailles, je perdrai aussi le fait qu'avec display:table, on a des colonnes de largeurs calculées automatiquement en fonction de leur contenu, non ?

Le style display:table-row est donc incompatible avec les autres styles que je voudrais appliquer ? C'est bizarre.