Quel est le véritable objectif de \'display: table-column\' en CSS ?

Démêler l'énigme du CSS "affichage : table-colonne"

L'exploration des propriétés HTML et CSS mène souvent à des questions intrigantes. Une de ces requêtes survient lors de l'implémentation d'une mise en page basée sur une table CSS à l'aide de la déclaration énigmatique « display: table-column ». Malgré son attrait, cette propriété a un objectif assez spécifique, qui peut conduire à des résultats déroutants si elle n'est pas comprise correctement.

Contexte : le modèle de table CSS

La table CSS model est un système complexe qui emprunte beaucoup au modèle de table HTML. Dans ce modèle, un tableau est composé de lignes et de colonnes, les cellules occupant chaque intersection d'une ligne et d'une colonne. Bien que les cellules soient des descendantes directes des lignes, elles n'ont aucune relation directe avec les colonnes.

Objectif de "l'affichage : tableau-colonne"

Contrairement à la croyance populaire, le " La propriété display: table-column" ne permet pas de créer des dispositions en colonnes. Son seul objectif est de définir des attributs qui s'appliquent spécifiquement aux cellules des lignes du tableau. En d'autres termes, cela nous permet de spécifier des caractéristiques telles que la couleur d'arrière-plan ou la taille de la police pour des cellules spécifiques en fonction de leur position dans la ligne.

Cependant, il est important de noter que la structure du tableau reste la même que dans les tableaux traditionnels. HTML. Les colonnes ne contiennent pas directement de contenu ; au lieu de cela, ils existent uniquement en tant que constructions logiques qui influencent la disposition des cellules dans les lignes.

Exemple illustratif

Considérez le code HTML et CSS suivant :

<code class="html"><section>
  <div id="colLeft">
    <div id="row1">
      <div id="cell1">AAA</div>
    </div>
    <div id="row2">
      <div id="cell2">BBB</div>
    </div>
  </div>
  <div id="colRight">
    <div id="row3">
      <div id="cell3">CCC</div>
    </div>
  </div>
</section></code>

<code class="css">section {
  display: table;
  height: 100%;
  background-color: grey;
}

#colLeft,
#colRight {
  display: table-column;
  height: 100%;
}

#row1,
#row2,
#row3 {
  display: table-row;
  height: 100%;
}

#cell1,
#cell2,
#cell3 {
  display: table-cell;
  height: 100%;
}</code>

Dans cet exemple, la déclaration "display: table-column" est appliquée aux éléments "colLeft" et "colRight". Ces éléments ne contiennent aucun contenu ; leur seul but est de définir la disposition des cellules au sein de leurs lignes respectives.

Malgré la présence de ces définitions de colonnes, vous remarquerez peut-être que rien n'apparaît dans le navigateur. En effet, comme mentionné précédemment, les colonnes ne contiennent pas directement de contenu. Le contenu doit être placé dans les cellules du tableau, qui sont des enfants des lignes du tableau.

Pour remédier à cela, nous devons modifier notre structure HTML pour placer le contenu dans les cellules du tableau :

<code class="html"><section>
  <div id="colLeft">
    <div id="row1">
      <div id="cell1">AAA</div>
    </div>
    <div id="row2">
      <div id="cell2">BBB</div>
    </div>
  </div>
  <div id="colRight">
    <div id="row3">
      <div id="cell3">CCC</div>
    </div>
  </div>
</section></code>

Avec ceci modification, le contenu apparaît comme prévu, démontrant la bonne utilisation de "display: table-column".

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!