Comment fonctionne \'display: table-column\' en CSS ?

Le rôle de "display: table-column" en CSS

Dans cet article, nous explorerons comment "display: table-column" column" fonctionne en CSS.

Le modèle de tableau CSS s'aligne sur le modèle de tableau HTML, où les lignes et les cellules sont des composants fondamentaux. "display: table-column" ne peut pas à lui seul créer des dispositions en colonnes.

Au lieu de cela, il définit des attributs spécifiques aux cellules dans les lignes du tableau. Par exemple, il peut spécifier la couleur d'arrière-plan de la première cellule de chaque ligne.

En HTML, la structure d'un tableau est la suivante :

<code class="html"><table>
  <col></col>
  <col></col>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table></code>

En utilisant les propriétés du tableau CSS, le Le HTML correspondant serait :

<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>

<code class="html"><div class="mytable">
  <div class="column1"></div>
  <div class="column2"></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>

En comprenant la relation entre les colonnes et les lignes dans le modèle de tableau CSS, les développeurs peuvent créer efficacement des mises en page de type tableau et contrôler les attributs spécifiques aux cellules.

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!