Word-avvolgendo un lungo cella di una tabella, pur mantenendo le larghezze dinamici in altri

Question

Ho una tabella che ha una lunga fila in una delle sue cellule. Ho bisogno la linea a lungo per essere diviso in modo che non causa il tavolo per essere largo oltre il 100%. Ho scoperto che con l'aggiunta di table-layout: fixed e word-wrap: word-break, si andrà a capo della cellula lungo. Tuttavia, un effetto collaterale di utilizzare table-layout è che provoca tutte le colonne di avere la stessa larghezza.

È possibile vedere un esempio di quella qui:

http://jsfiddle.net/RYdLd/2/

Come posso fare il formato automatico la larghezza della prima colonna per misura solo il suo contenuto? (Vale a dire in questo esempio, dovrebbe essere ampio abbastanza per mostrare la 1 e 2 in quella colonna.)

I dati della tabella sarà caricato in modo dinamico, quindi una soluzione che duri codici larghezza valori non è buono perché non c'è modo di sapere in anticipo come largo una colonna dovrebbe essere. La mia unica opzione è quella di utilizzare un <table>, non posso usare un <div> o qualche altro elemento.

Answer 1

Secondo il specifica ufficiale , quando si utilizza un table-layout fisso, larghezza delle colonne della prima riga determinare la larghezza delle colonne dell'intera tabella. Se nessuno di essi sono definiti, distribuirà la larghezza delle colonne in modo uniforme.

Dato che non sembra essere qualsiasi altra opzione, ho finito per usare il seguente metodo:

1. Il caricamento dei dati nella tabella, mentre il table-layout è impostato su automatico.
2. Leggendo la larghezza delle colonne che voglio essere dinamici.
3. Impostazione quei larghezza delle colonne ai loro valori correnti.
4. Modifica della table-layout a fisso.

Ecco un esempio, che non è perfetto (la larghezza viene diminuito di un po '):

http://jsfiddle.net/RYdLd/7/

Answer 2

ho scoperto questo mentre alle prese con lo stesso problema:

Impostazione break-word su un elemento corrisponde esattamente a inserire uno spazio di ampiezza zero tra tutti i caratteri del testo contenuto all'interno dell'elemento.

Se non fosse che questo in realtà funziona con normali tabelle dinamiche!

Questa soluzione è molto veloce, in quanto non richiede alcuna Javascript.

(Potrebbe tuttavia essere utilizzata da Javascript se lo si desidera. Trova tutte le cellule con break-parola, afferrare tutti i nodi di testo bambino, e inserire uno spazio zero larghezza tra ogni personaggio. Anche allora, lo script verrebbe eseguito solo una volta durante caricamento della pagina, quindi questo dovrebbe essere ancora estremamente performante.)

spazio Zero-larghezza è ​

Answer 3

È possibile utilizzare:. Word-wrap stile css per rompere le lunghe frasi

word-wrap: break-word

Answer 4

E 'facile impugnatura / avvolgere parole lunghe in DIV s e tavoli fissi ( table-layout: fisso ) - vale solo CSS3 < em> word-wrap:. break-parole

Entro tabelle dinamiche sopra proprietà fa solo metà del lavoro. Abbiamo bisogno inoltre di aiutare i navigatori a trovare punti di rottura.

Un po 'spiegazione più dettagliata si può trovare nell'articolo parole lunghe Wrap all'interno tabelle dinamiche .