Comment égaliser la largeur des cellules d'un tableau en CSS ?

Égalisation de la largeur des cellules d'un tableau en CSS

Dans un tableau comportant plusieurs cellules, garantir des largeurs égales peut être difficile lorsque le contenu de chaque cellule varie. Ce problème se pose lorsque l'on tente de définir une largeur maximale, car cela nécessiterait de connaître le nombre total de cellules.

Solution CSS pure

Heureusement, il existe une solution CSS pure Solution CSS pour égaliser la largeur des cellules du tableau, quelle que soit la variation du contenu. Cette technique utilise les propriétés CSS suivantes :

1. table-layout:fixed; : Cette propriété applique une disposition fixe pour le tableau, garantissant que les cellules respectent les largeurs spécifiées.
2. Largeur sur chaque cellule : Pour déclencher l'algorithme de calcul de tableau alternatif, nous attribuons une petite largeur (par exemple, 2 %) à chaque cellule.

Implémentation

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

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

Ce CSS garantira que les cellules du tableau ont des largeurs égales, même avec un contenu différent.

Considérations de compatibilité

La disposition de la table : corrigée ; La propriété est largement prise en charge dans les navigateurs modernes, notamment Chrome et IE8 . Cependant, Safari 6 sur OS X implémente cette propriété différemment, ce qui peut conduire à des résultats inattendus. Par mesure de précaution, il est recommandé de tester votre solution sur différents navigateurs pour tenir compte d'éventuels problèmes de compatibilité.

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!