Table with dynamic columns but layout fixed

Question

I want a table that is 100% if the page that can contain any number of columns, dynamically created. Each column can contain very long words, so long that they all might not fit on one page. To fix this i used table-layout: fixed which made all columns of the table visible on the page. The problem is that I still want the width of each column to be dynamic so that if a column have short words it should be shorter than the one with the long word.

Example: jsfiddle.

Table 1 always shows all columns but when the page is wide enough it breaks the word even though there are free space in other columns.

Table 2 works fine when the page is wider than the columns but the first column pushes the other columns out of the screen/onto other objects when the window is smaller.

Is there a way to get it all? A table that always contains all columns and columns that are not wider than they have to be to fit? I want it to break the words if it has to rather than overflowing the table.

I could accept a js/jquery solution but if it's possible with css that is preferable.

Edit:

Small table: Note: asasdasdasdasdasdasdasdasdasdasdasd is one word that is shortened because the table can't be larger than this.

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

Large table: Note: all columns are not of equal size, preferably they increase with empty spaces equally distributed.

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

Answer 1

If I understand this could be a starting point:

var tds;

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

   tds = $("td");

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

});