Empêcher le texte de se chevaucher tableau largeur de td
Comment puis-je restreindre l'entrée de la table <td> à l'expansion sur l'écran entier quand
l'entrée est trop long?
5 réponses
il y a max-width , max-height , et overflow dans CSS.
Donc
td.whatever
{
max-width: 150px;
max-height: 150px;
overflow: hidden;
}
limiterait la largeur et la hauteur maximales à 150px, et il peut être n'importe quoi de moins de 150 jusqu'à 150, et tout ce qui ne rentre pas à l'intérieur qui sera coupé et caché de la vue.
Dépassement de la valeur par défaut ( overflow: visible; ) est tout simplement de permettre à tout ce qui ne rentre pas à l'intérieur de son conteneur spécifié à juste déborder à l'extérieur. Si vous voulez seulement le limiter horizontalement et ne voulez pas cacher quoi que ce soit, word-wrap peut aider:
td.whatever
{
max-width: 150px;
word-wrap: break-word;
}
word-wrap cassera les mots quand il le faut, même si ce n'est pas à la fin d'un mot. Vous pouvez aussi utiliser height et width pour spécifier une taille fixe si vous ne voulez pas que la table se dilate ou rétrécit du tout.
vous pouvez utiliser word-wrap:break-word; , donc les mots trop longs sont enveloppés.
td.whatever_class{
max-width: 100px;
}
remplacez 100px avec la largeur que vous voulez. 1000px est une bonne largeur pour les sites Web comme il conviendra sur presque tous les moniteurs ont aujourd'hui, donc si vous aviez 20 colonnes puis le faire 50px par exemple.
vous devez spécifier à la fois les styles max-width et display (parce que l'attribut display est placé funny parce que c'est un td, pas un élément normal) e.g.
td{
max-width: 100px;
display: inline-block;
}
il y a aussi la solution agréable avec la propriété max-width: 0px; ainsi il sera responsable à la pleine largeur de la table.