Maison  >  Article  >  interface Web  >  Comment corriger la largeur de la disposition du tableau : corrigé

Comment corriger la largeur de la disposition du tableau : corrigé

php中世界最好的语言
php中世界最好的语言original
2018-02-02 10:14:223165parcourir

Cette fois, je vais vous montrer comment fixer la largeur du tableautable-layout : fixe, quelles sont les notes de fixation de la largeur du tableau table-layout : corrigé, voici quelques exemples de cas pratiques.

Afin de permettre au tableau de remplir l'écran (la zone vide restante), son attribut de largeur est souvent défini comme : 100 %, et les cellules sont également définies comme des pourcentages.

Mais cela posera des problèmes : si le texte dans la cellule dépasse la limite de largeur, il sera automatiquement renvoyé à la ligne et la hauteur augmentera automatiquement, ce qui entraînera des styles inégaux de l'ensemble du tableau et le rendra laid.

Une solution simple consiste à désactiver l'habillage du texte : white-space:nowrap; overflow:hidden;

Si simple ! toujours inattendu : le texte est affiché sur une seule ligne, la largeur est automatiquement élargie, et elle dépasse même le conteneur parent, et le débordement n'a aucun effet !

Que se passe-t-il ? Est-ce à cause du pourcentage ? Mais si vous utilisez la largeur fixe de statique, vous perdez la flexibilité du tableau.

Depuis, j'ai trouvé la solution ultime sans effort : Largeur de table fixe : table-layout: fixe ;

Au fait, j'ai fait un rendu simple, pour référence :

Comment corriger la largeur de la disposition du tableau : corrigé

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment faire en sorte que le menu déroulant HTML conserve la valeur sélectionnée après la soumission et ne revienne pas à la valeur par défaut

La ligne de démarcation hr est différente Quelle est la différence dans les 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn