Maison  >  Article  >  interface Web  >  Utilisation de l'attribut table-layout:fixed en CSS

Utilisation de l'attribut table-layout:fixed en CSS

巴扎黑
巴扎黑original
2017-06-28 10:25:181760parcourir

table-layout:fixed Utilisation de l'attribut :
Si vous souhaitez un tableau de taille fixe, le texte à l'intérieur est obligé d'être renvoyé (surtout dans un long chaîne de texte anglais, et il n'y a pas d'espace au milieu), afin d'éviter que le texte trop long

ne casse le tableau, utilisez généralement le style : table-layout:fixed. Il y aura cependant quelques problèmes sous Firefox. J'ai évoqué certaines pratiques de Gmail et fait plusieurs

tests pour trouver une solution.

Exemple 1 : (Navigateur IE) Situation ordinaire

CODE :

< ;tr> ;
abcdefghigklmnopqrstuvwxyz 1234567890

Vous pouvez voir que width=80 ne fonctionne pas, table Spread ouverte par personnages.

Exemple 2 : (navigateur IE) utilisez le style table-layout:fixed

CODE:

< ; /table>

width=80 fonctionne, mais la table s'enroule.

Exemple 3 : (navigateur IE) utilisant le style table-layout:fixed et nowrap

CODE:

abcdefghigklmnopqrstuvwxyz 1234567890


width=80 fonctionne et les sauts de ligne sont également éliminés.


Exemple 4 : (navigateur IE) Utilisez le style table-layout:fixed et nowrap lorsque vous utilisez une valeur numérique pour corriger la taille td

CODE :

abcdefghigklmnopqrstuvwxyz 1234567890


< width="20" nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

& lt;/table>


Malheureusement, le nowrap du premier td ne fonctionne pas


Exemple 5 : (navigateur IE) Utilisez le style table-layout:fixed avec le pourcentage fixe de la taille du td nowrap

CODE :




abcdefghigklmnopqrstuvwxyz 1234567890abcdefghigklmnopqrstuvwxyz 1 lt;/td> ;
< /tr>


Modifié en pourcentage, j'ai finalement réussi

Exemple 6 : (navigateur Firefox) utilisant le pourcentage pour corriger la taille du td Dans ce cas, utilisez le style table-layout : fixe et effet nowrap : mettez l'exemple 5 sous Firefox, et il échoue à nouveau

Exemple 7 : (navigateur Firefox) Utilisez la table de style lorsque vous utilisez le pourcentage pour corriger la taille du td : fixe. et nowrap, et utilisez p
CODE:





abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 123 90


< /td>


Le monde est enfin en paix

Exemple 8 : (navigateur Firefox) en utilisant un td numérique fixe Utilisez le styles table-layout:fixed et nowrap dans le cas de la taille, et utilisez p

CODE:


CODE :

< tr> ;



abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrs tuvwxyz 1234567890



nowrap ne fonctionne plus
Enfin, l'exemple 7 est celui-là qui fonctionne sous IE et Firefox peut parfaitement résoudre le problème des sauts de ligne forcés sur les pages.


J'ai également continué à vérifier certaines informations. Puisque seule la largeur de la première ligne compte, puis-je définir la première ligne ?

L'attribut colgroup a été découvert.

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