Comment rendre les cellules d'un tableau de largeur égale à l'aide de CSS ?

Cellules de tableau de largeur égale avec CSS

Question :

Comment pouvons-nous créer une valeur indéterminée nombre d'éléments de cellule de tableau dans un conteneur de tableau ont des largeurs égales, quelle que soit la taille de leur contenu ?

Réponse :

Oui, il est possible d'y parvenir en utilisant du CSS pur .

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

div > div {
  display: table-cell;
  width: 2%; /* or 100% according to OP comment */
}</code>

Voici comment cela fonctionne :

1. Définir la disposition de la table : corrigé ; sur le conteneur div parent. Cela active un algorithme de disposition de tableau dans lequel le tableau tente de conserver les dimensions spécifiées.
2. Attribuez une largeur à chaque div (cellule du tableau). Dans cet exemple, nous l'avons défini sur 2 %, mais vous pouvez l'ajuster en fonction de vos besoins.
3. Cette largeur déclenche le comportement de disposition du tableau fixe et le navigateur attribuera des largeurs égales à chaque cellule, garantissant ainsi ils ont des largeurs égales quelle que soit la taille de leur contenu.

Remarques supplémentaires :

• Cette solution est compatible avec Chrome et IE8.
• Sachez que Safari 6 sur macOS a une interprétation différente de la disposition des tableaux : corrigé ;. Cela pourrait conduire à des résultats différents dans ce navigateur.
• Vous pouvez définir une largeur fixe pour le div parent (table) pour contrôler la largeur globale du tableau. Si vous ne spécifiez pas de largeur, elle sera par défaut de 100 %.

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!