Comment contrôler efficacement la largeur maximale des cellules d’un tableau avec des pourcentages ?

Élargissement des capacités CSS de largeur maximale pour les cellules de tableau : exploitation des pourcentages

Dans le domaine des tableaux HTML, il est souvent souhaitable de contrôler la largeur maximale largeur des cellules du tableau, en particulier lorsqu'il s'agit de texte long ou pour assurer la compatibilité entre appareils. Cependant, définir la largeur maximale à l'aide de pourcentages peut parfois rencontrer des limites.

Dans l'extrait de code donné :

<table>
  <tr>
    <td>Test</td>
    <td>A long string blah blah blah</td>
  </tr>
</table>

<style>
  td {
    max-width: 67%;
  }
</style>

L'application de la largeur maximale sous forme de pourcentage aux cellules du tableau ajusterait intuitivement leurs largeurs en conséquence . Cependant, des problèmes de compatibilité avec les navigateurs peuvent survenir, entraînant un rendu incohérent.

Pour pallier ces limitations, il existe une solution moins connue : la propriété CSS 'table-layout'. En définissant « table-layout : fixed » sur la balise table, nous pouvons établir une disposition à largeur fixe pour toutes les cellules qu'elle contient. Cela fournit une méthode cohérente et fiable pour contrôler la largeur maximale des cellules à l'aide de pourcentages.

table {
  width: 100%;
  table-layout: fixed;
}
td {
  max-width: 67%;
}

Grâce à cette approche, la largeur maximale des cellules peut être contrôlée efficacement à l'aide de pourcentages, quels que soient les problèmes de compatibilité du navigateur. Reportez-vous au Fiddle mis à jour suivant pour le voir en action : http://jsfiddle.net/Fm5bM/4/.

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!