Come posso limitare la larghezza della colonna della tabella?

Question

Una delle colonne della tabella può contenere un testo lungo senza spazi vuoti. Come posso limitare la sua larghezza a, ad esempio, 150 px? Non voglio che sia sempre 150px (se è vuoto dovrebbe essere stretto), ma se c'è un testo lungo voglio che sia limitato con 150px e il testo da avvolgere.

Ecco un esempio di prova: http://jsfiddle.net/Kh378/ (limitiamo la 3a colonna).

Grazie in anticipo.

Aggiornamento:
L'impostazione di questo stili:

word-wrap: break-word; 
max-width: 150px; 

non funziona in IE8 (testati su computer diversi) e suppongo che non funziona in qualsiasi versione di IE.

Answer 1

Updated

Sulla della tabella td e th tag ho aggiunto:

word-wrap: break-word; 
max-width: 150px; 

non è pienamente compatibile in tutti i browser, ma un inizio.

Answer 2

Si dovrebbe essere in grado di stile la vostra colonna con:

max-width: 150px; 
word-wrap: break-word; 

noti che word-wrap è supportato in IE 5.5+, Firefox 3.5+, e browser WebKit (Chrome e Safari).

Answer 3

La domanda è stata risolta in another StackOverflow thread. In breve, dovresti semplicemente usare la larghezza invece della larghezza massima.

Answer 4

È necessario utilizzare invece la larghezza.

<table> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Age</th>     
      <th style="width: 150px;"></th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

Ma solo nella sezione <thead>.

Answer 5

c'è un'opzione per simulare max-width:

simulateMaxWidth: function() { 
    this.$el.find('th').css('width', ''); // clear all the width values for every header cell 
    this.$el.find('th').each(function(ind, th) { 
     var el = $(th); 
     var maxWidth = el.attr('max-width'); 
     if (maxWidth && el.width() > maxWidth) { 
      el.css('width', maxWidth + 'px'); 
     } 
    }); 
} 

questa funzione può essere chiamato $ (window) .on ('ridimensionare', ...) più volte

this.$el 

rappresenta elemento padre, nel mio caso ho marionetta

per quelli esimo elementi che dovrebbe avere max-width, ci dovrebbe essere un attributo max-width come:

<th max-width="120"> 

Answer 6

1) Specificare la larghezza per ogni colonna in <th> in base alle proprie esigenze.

2) Aggiungere un ritorno a capo per ogni <td> in <tr> dello <table>.

word-wrap: break-word; 

Answer 7

Dopo alcuni esperimenti in Chrome sono arrivato alla seguente:

• se la tabella ha un <th> che dovrebbe disporre di un "larghezza" o un "max-width" set
• la <td> deve avere impostato "max-larghezza" e "word-wrap: break-word;"

Se si utilizza una "larghezza" nel valore <th>, verrà utilizzato il suo valore. Se si utilizza una "larghezza massima" nel valore <th>, viene utilizzato il valore "larghezza massima" di <td>.

Quindi questa funzionalità è piuttosto complessa. E non ho nemmeno studiato tavoli senza intestazioni o senza stringhe lunghe che hanno bisogno di una "parola d'ordine".

Answer 8

è molto facile

è possibile aggiungere attributi come questi

max-width

max-height

Possono essere impostati in HTML come attributo o in CSS come stile