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?

27
demandé sur Brian Tompsett - 汤莱恩 2011-01-09 00:32:11
la source

5 ответов

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.

50
répondu Phoenix 2013-02-13 21:03:06
la source

vous pouvez utiliser word-wrap:break-word; , donc les mots trop longs sont enveloppés.

17
répondu Floern 2011-01-09 00:41:52
la source
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.

6
répondu Giles Lavelle 2011-01-09 00:42:21
la source

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;
}
2
répondu Dairy Window 2015-05-19 14:16:37
la source

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.

1
répondu Experimenter 2015-09-17 15:42:24
la source

Autres questions sur html css html-table width