Que fait réellement \'display: table-column\' en CSS ?

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

En HTML, les tableaux sont constitués de lignes, avec chaque ligne 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 structure de colonnes. 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 vs CSS

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

<code class="html"><table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table></code>

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

<code class="css">.mytable {
  display: table;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
}</code>

Dans cet exemple, les divs ".column1" et ".column2" ne sont pas conteneurs pour le 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 sous-jacente du tableau reste la même qu'en HTML, les cellules étant les enfants des lignes.
• "display: table-column" ne fournit pas de mécanisme pour plusieurs -dispositions en colonnes, où le contenu circule entre les colonnes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!