CSS larghezza percentuale e il testo-trabocca in una cella di una tabella

Question

Ho una tabella in cui la larghezza delle cellule è in percentuale e voglio usare text-overflow: ellipsis per nascondere lunghe righe di testo:

http://jsfiddle.net/Fm5bM/

Nel esempio l'ellissi funziona bene in un div ma non nella cella. Cresce e ignora entrambi sia width:60% e max-width:60%.

Se aggiungo un display:block alla cella, il testo si ferma al 60% e ottiene i puntini di sospensione, ma la larghezza totale della cella è ancora la dimensione dell'intero testo.

http://jsfiddle.net/Fm5bM/3/

In definitiva, voglio che il tavolo per adattarsi allo schermo. C'è un modo per farlo con puro css?

Answer 1

Questo è fatto facilmente utilizzando table-layout: fixed, ma "un po 'complicato" perché non molte persone conoscono questa proprietà CSS.

table { 
    width: 100%; 
    table-layout: fixed; 
} 

Guardalo in azione presso il violino aggiornato qui: http://jsfiddle.net/Fm5bM/4/