Pourquoi \'display: table-column\' ne fonctionne-t-il pas comme prévu dans la disposition des tableaux CSS ?

Pourquoi « affichage : table-colonne » ne fonctionne-t-il pas dans ma mise en page CSS ?

Compte tenu du code HTML et CSS fourni, vous on peut s'attendre à voir une mise en page avec deux colonnes ("colLeft" et "colRight") et trois lignes ("row1", "row2" et "row3"). Cependant, dans les navigateurs comme Chrome et IE, la mise en page entière se réduit à une taille nulle.

Ce comportement découle d'une incompréhension fondamentale du fonctionnement du modèle de table CSS. Bien qu'il ressemble au modèle de tableau HTML, il existe des différences cruciales :

• Les colonnes ne sont pas des conteneurs directs : Dans les tableaux HTML, les colonnes ("") ne sont pas directement contiennent des cellules. Au lieu de cela, les cellules ("") sont des enfants de lignes (""). Cette structure est conservée dans le modèle de table CSS.
• "display: table-column" Définit les attributs de cellule : L'utilisation de "display: table-column" sur un élément ne crée pas de colonne dans le sens traditionnel. Au lieu de cela, il définit les attributs qui s'appliquent aux cellules des lignes du tableau. Par exemple, vous pouvez l'utiliser pour définir la couleur d'arrière-plan de la première cellule de chaque ligne.
• Structure de tableau standard : La structure globale du tableau reste la même qu'en HTML. Les lignes contiennent des cellules et les colonnes ne contiennent aucun contenu direct.

Structure HTML et CSS correcte :

Pour créer une disposition de tableau CSS valide, vous devez utilisez la structure suivante :

<code class="html"><div class="mytable">
  <div class="mycolumn1"></div>
  <div class="mycolumn2"></div>
  <div class="myrow">
    <div class="mycell">Contents of first cell in row 1</div>
    <div class="mycell">Contents of second cell in row 1</div>
  </div>
  <div class="myrow">
    <div class="mycell">Contents of first cell in row 2</div>
    <div class="mycell">Contents of second cell in row 2</div>
  </div>
</div></code>

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

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!