Tabella con colonne dinamiche ma layout fisso

Question

Voglio una tabella 100% se la pagina può contenere un numero qualsiasi di colonne, create dinamicamente. Ogni colonna può contenere parole molto lunghe, a tal punto che potrebbero non rientrare in una sola pagina. Per risolvere questo ho usato table-layout: fixed che ha reso visibili tutte le colonne della tabella sulla pagina. Il problema è che voglio comunque che la larghezza di ogni colonna sia dinamica, in modo che se una colonna abbia parole brevi dovrebbe essere più corta di quella con la parola lunga.

Esempio: jsfiddle.

Tabella 1 mostra sempre tutte le colonne ma quando la pagina è sufficientemente ampia interrompe la parola anche se ci sono spazi liberi in altre colonne.

La tabella 2 funziona correttamente quando la pagina è più ampia delle colonne ma la prima colonna spinge le altre colonne fuori dallo schermo/su altri oggetti quando la finestra è più piccola.

C'è un modo per ottenere tutto? Una tabella che contiene sempre tutte le colonne e le colonne che non sono più larghe di quelle che devono essere adattate? Voglio che rompa le parole se deve piuttosto che traboccare il tavolo.

Potrei accettare una soluzione js/jquery ma se è possibile con css che è preferibile.

Edit:

Tavolino: Nota: asasdasdasdasdasdasdasdasdasdasdasd è uno parola che viene accorciato perché la tabella non può essere più grande di questo.

+--------------------+----------+---------+ 
|asasdasdasdasdasdasd|qweqweqweq|zxczxczxc| 
|asdasdasdasdasd  |   |   | 
+--------------------+----------+---------+ 

Grande tavolo: Nota: tutte le colonne non sono di dimensioni uguali, preferibilmente aumentano con spazi vuoti equamente distribuita.

+--------------------------------------+-------------+------------+ 
|asasdasdasdasdasdasdasdasdasdasdasd |qweqweqweq |zxczxczxc | 
+--------------------------------------+-------------+------------+ 

Answer 1

Se ho ben capito questo potrebbe essere un punto di partenza:

var tds; 

$("table").each(function() { 

    tds = $("td"); 

    for(var x = 0; x < tds.length; x++){ 
     tds.eq(x).css('max-width', '100px'); 
    } 

}); 

Answer 2

Prima di tutto rimuovere il "table-layout: fixed" proprietà.

Provate il seguente codice, questo dovrebbe funzionare perfettamente nel vostro caso:

$(document).ready(function(){ 

$("table").find('tr').children('td').each(function() { 
    var wdth = $(this).html().length + 10; 
    $(this).css({ 'padding-right': '10px' }, { 'width': wdth + 'px' }); 
    }); 
});