Pouvez-vous créer des cellules de tableau de largeur égale avec un contenu variable en utilisant uniquement du CSS ?

Cellules de tableau de largeur égale avec contenu variable

Considérons un scénario dans lequel vous avez plusieurs éléments de cellules de tableau à l'intérieur d'un conteneur de tableau. Malgré des tailles de contenu différentes, vous souhaitez que ces cellules de tableau aient des largeurs égales. Existe-t-il une solution purement CSS pour y parvenir ?

Solution :

Pour obtenir des cellules de tableau de largeur égale quelle que soit la taille du contenu, vous pouvez utiliser l'approche CSS suivante :

1. Mise en page de table fixe : Appliquer la mise en page de table : fixe ; au div parent représentant la table. Cela demande essentiellement au navigateur de respecter strictement les largeurs de cellules spécifiées.
2. Largeur minimale des cellules : Définissez une largeur minimale, même petite, comme 2 %, pour chaque cellule (div > div). Cela déclenche l'algorithme de disposition du tableau souhaité, dans lequel le navigateur tente de respecter les dimensions de cellule spécifiées.

Exemple de code :

<code class="css">div {
  display: table;
  width: 250px;
  table-layout: fixed;
}

div > div {
  display: table-cell;
  width: 2%;
}</code>

Remarque :

Cette solution fonctionne avec Chrome, IE8 et Safari 6 (avec quelques mises en garde). Cependant, il est important de se rappeler que Safari 6 peut avoir des comportements de disposition des tableaux différents de ceux des autres navigateurs.

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!