Tabla con columnas dinámicas pero diseño fijo

Question

Quiero una tabla que sea 100% si la página puede contener cualquier cantidad de columnas, creadas dinámicamente. Cada columna puede contener palabras muy largas, por lo que es posible que no todas quepan en una página. Para solucionar esto, utilicé table-layout: fixed, lo que hizo visibles todas las columnas de la tabla en la página. El problema es que todavía quiero que el ancho de cada columna sea dinámico, de modo que si una columna tiene palabras cortas, debería ser más corta que la que tiene la palabra larga.

Ejemplo: jsfiddle.

La Tabla 1 muestra siempre todas las columnas, pero cuando la página es lo suficientemente ancha, rompe la palabra aunque haya espacio libre en otras columnas.

La tabla 2 funciona bien cuando la página es más ancha que las columnas pero la primera columna empuja las otras columnas fuera de la pantalla/a otros objetos cuando la ventana es más pequeña.

¿Hay alguna manera de obtenerlo todo? ¿Una tabla que siempre contiene todas las columnas y columnas que no son más anchas de lo que deben ser para ajustarse? Quiero que rompa las palabras si tiene que desbordar la mesa.

Podría aceptar una solución js/jquery pero si es posible con css es preferible.

Editar:

Pequeña mesa: Nota: asasdasdasdasdasdasdasdasdasdasdasd es uno palabra que se acorta debido a que la tabla no puede ser mayor que este.

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

Gran mesa: Nota: todas las columnas no son de igual tamaño, preferiblemente que aumentan con espacios vacíos igualmente distribuido.

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

Answer 1

Si entiendo que esto podría ser un punto de partida:

var tds; 

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

    tds = $("td"); 

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

}); 

Answer 2

En primer lugar eliminar el "table-layout: fijo" propiedad.

Pruebe el siguiente código, esto debería funcionar perfectamente en su 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' }); 
    }); 
});