Comment définir la largeur maximale des cellules d'un tableau à l'aide de pourcentages ?

Définition de la largeur maximale des cellules d'un tableau à l'aide de pourcentages

Cette enquête répond à un problème récurrent rencontré par les développeurs : définir la largeur maximale des cellules d'un tableau à l'aide de pourcentages. L'exemple HTML et CSS fourni illustre ce problème.

Bien que la propriété CSS max-width soit généralement utilisée pour contrôler la largeur des éléments, elle n'a pas initialement fonctionné comme prévu sur les cellules d'un tableau. Comment surmonter cette limitation pour définir la largeur maximale des cellules du tableau à l'aide de pourcentages ?

La clé pour débloquer cette fonctionnalité réside dans la propriété table-layout. En définissant table-layout: fixé sur la balise table, le tableau est invité à allouer une largeur spécifique à chaque cellule. Cela permet un contrôle précis sur la largeur des cellules, y compris l'utilisation de pourcentages.

Considérez l'exemple CSS suivant :

table {
  width: 100%;
  table-layout: fixed;
}

td {
  max-width: 67%;
}

Maintenant, les cellules du tableau respecteront la largeur maximale spécifiée par le propriété max-width, garantissant qu'un texte trop long ne déborde pas et ne perturbe pas la disposition du tableau. Cette technique est compatible avec les navigateurs modernes et offre une solution fiable pour gérer les largeurs de cellules de tableau à l'aide de pourcentages.

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!