Comment un "affichage : tableau-colonne" CSS est-il censé fonctionner ?

En HTML, les tableaux sont constitués de lignes, chaque ligne étant contenant des cellules. CSS étend ce concept, permettant aux concepteurs de définir des dispositions spécifiques de lignes et de colonnes. Alors que "display: table-row" et "display: table-cell" sont simples, "display: table-column" a un objectif plus nuancé.

Comprendre la fonction de "display: table-row" column"

Contrairement à "display: table-row" et "display: table-cell", "display: table-column" n'établit pas de nouvelle colonne structure. Au lieu de cela, il définit les attributs des cellules dans les lignes du tableau existant. Par exemple, vous pouvez spécifier la couleur d'arrière-plan de la première cellule de chaque ligne.

Structure de tableau HTML ou CSS

Pour comprendre ce concept, considérez le HTML suivant tableau :

Cell 1
    
Cell 2
  
Cell 3
    
Cell 4
  

Correspondant à la structure HTML, le CSS suivant peut être appliqué :

.mytable {
  display: table;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
}

Dans cet exemple, les div ".column1" et ".column2" ne sont pas des conteneurs de contenu. Ils définissent simplement les attributs des cellules dans les lignes du tableau.

Points clés à retenir

• "affichage : colonne de tableau" définit les attributs des cellules dans les lignes du tableau. , pas pour les colonnes elles-mêmes.
• La structure du tableau sous-jacent reste la même qu'en HTML, les cellules étant les enfants des lignes.
• "affichage : table-column" ne fournit pas de mécanisme pour les mises en page multi-colonnes, où le contenu circule entre les colonnes.