Prevenire il testo dalla tabella di sovrapposizione td width

Question

Come posso limitare l'ingresso della tabella <td> all'espansione dell'intero schermo quando la voce è troppo lunga?

Answer 1

Bene, c'è max-width, max-height e overflow in CSS.

Così

td.whatever 
{ 
    max-width: 150px; 
    max-height: 150px; 
    overflow: hidden; 
} 

limiterebbe la massima larghezza e l'altezza di 150px, e può essere qualsiasi cosa, da meno di 150 a 150, e tutto ciò che non si adatta all'interno che sarà ritagliato fuori e nascosta dalla vista

L'overflow predefinito (overflow: visible;) consiste nel consentire semplicemente a tutto ciò che non si adatta all'interno del contenitore specificato di riversarsi all'esterno di esso. Se si desidera solo limitare orizzontalmente e non voglio nascondere nulla, word-wrap può aiutare:

td.whatever 
{ 
    max-width: 150px; 
    word-wrap: break-word; 
} 

word-wrap romperà parole ogni volta che deve, anche se non è alla fine di una parola. È inoltre possibile utilizzare solo height e width per specificare una dimensione fissa se non si desidera che la tabella si espanda o si riduca del tutto.

Answer 2

È possibile utilizzare word-wrap:break-word;, in modo da avvolgere le parole troppo lunghe.

Answer 3

td.whatever_class{ 
    max-width: 100px; 
} 

sostituire 100 px con la larghezza desiderata. 1000px è una buona larghezza per i siti web in quanto si adatta a quasi tutti i monitor che le persone hanno oggi, quindi se si dispone di 20 colonne quindi renderlo 50px per esempio.

Answer 4

È necessario specificare ENTRAMBI gli stili max-width e display (poiché l'attributo di visualizzazione è impostato in modo divertente perché è un elemento td, non un elemento normale) ad es.

td{ 
    max-width: 100px; 
    display: inline-block; 
} 

Answer 5

C'è anche una bella soluzione con proprietà larghezza massima: 0px; quindi sarà responsabile per tutta la larghezza della tabella.