Maison > interface Web > tutoriel HTML > Définissez la largeur du tableau pour qu'elle ne change pas avec le texte afin qu'il soit fixe_HTML/Xhtml_Production de pages Web

Définissez la largeur du tableau pour qu'elle ne change pas avec le texte afin qu'il soit fixe_HTML/Xhtml_Production de pages Web

WBOY
Libérer: 2016-05-16 16:38:52
original
1642 Les gens l'ont consulté

Une fois que la largeur du tableau sur la page est définie sur width="600px", la largeur n'est toujours pas fixée. Si le texte est trop long, il ne sera pas renvoyé à la ligne et le tableau sera déformé.

Solution :

1.table Définissez la largeur, la largeur absolue et la largeur relative peuvent être utilisées

table-layout:fixed
Définissez cet attribut, et tous les autres td Tous ont la même largeur.

Après cela, la largeur du tableau est fixe, mais si l'article à l'intérieur est très long, le texte le couvrira

Solution :

Ajouter un style=" in td word-wrap:break-word;" Enveloppez simplement le mot automatiquement. Si vous ne souhaitez pas envelopper la ligne, vous pouvez masquer le contenu en excès et le remplacer par des points de suspension :

Ajouter

Copier le codeLe code est le suivant :
overflow:hidden white-space:nowrap;


text-overflow:ellipsis; (actuellement testé uniquement dans IE8)
Méthode recommandée (2013-11-14 par Zhang Lei) Utilisez div pour contrôler le contenu de TD

Ajouter dans TD

(1) Le texte qui dépasse la largeur et la hauteur sera automatiquement masqué



Copier le codeLe code est le suivant :
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa& lt;/div>


(2) Définir le retour automatique à la ligne lorsque la largeur de td dépasse la longueur



Copiez le codeLe code est le suivant :
/td>
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal