Comment réparer la disposition de la table en largeur de table CSS : corrigé ?

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. Cependant, ce problème peut être résolu en désactivant le texte. emballage. Afin de permettre au tableau de remplir l'écran (la zone vide restante), son attribut width 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 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.

J'ai donc trouvé la solution ultime sans effort : largeur de table fixe : table-layout : fixe

J'en ai fait une simple d'ailleurs. Rendus, veuillez vous référer à ; le suivant :

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!