Quel est le but et la structure du CSS \'display: table-column\' ?

CSS "display: table-column" expliqué

Dans le développement Web, la propriété "display: table-column" est souvent mal comprise. Il est destiné à fonctionner dans le modèle de table CSS, qui est basé sur le modèle de table HTML.

Le modèle de table CSS

Une table dans le modèle de table CSS est divisée en lignes et en colonnes, les cellules occupant des positions spécifiques dans les lignes. Cependant, contrairement aux tableaux HTML, « display : table-column » ne permet pas de placer le contenu directement dans les colonnes.

Objectif de « display : table-column »

L'objectif principal de "display: table-column" est de définir des attributs pour les cellules du tableau, de la même manière que le fait la propriété "display: table-cell". Par exemple, il peut définir la couleur d'arrière-plan de la première cellule de chaque ligne.

Comment les colonnes sont structurées

En HTML, les colonnes ne sont pas des conteneurs pour les cellules ; les cellules sont placées dans des lignes. La même structure s'applique dans le modèle de table CSS. Par exemple :

<code class="HTML"><table>
  <tr>
    <td>Column 1 Content</td>
    <td>Column 2 Content</td>
  </tr>
</table></code>

Représentation de table CSS

Pour obtenir une mise en page similaire à l'aide des propriétés de table CSS :

<code class="CSS">.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
}
.col-1 {
  display: table-column;
  background-color: green;
}
.col-2 {
  display: table-column;
}</code>

<code class="HTML"><div class="table">
  <div class="col-1"></div>
  <div class="col-2"></div>
  <div class="row">
    <div class="cell">Column 1 Content</div>
    <div class="cell">Column 2 Content</div>
  </div>
</div></code>

Dans Dans ce scénario, les divs « col-1 » et « col-2 » représentent des colonnes de tableau mais ne contiennent aucun contenu direct. Le contenu est placé dans les lignes.

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!