A table with dynamic columns, but the layout is fixed

Question

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

Example: jsfiddle .

Table 1 always shows all the columns, but when the page is wide enough, it will break the word, although other columns have free space.

Table 2 works great when the page is larger 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 any way to get all this? A table that always contains all columns and columns that are no wider than they should fit? I want him to break the words if he should, and not overflow the table.

I could make a js / jquery solution, but if possible with CSS, this is preferable.

Edit:

Small table: Note: asasdasdasdasdasdasdasdasdasdasdasd is one word that is abbreviated because the table cannot be larger than this.

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

Large table: Note: all columns do not have the same size, preferably they grow with equal volumes of empty spaces.

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

Answer 1

If I understand that this could be the starting point:

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

Answer 2

First of all, remove the "table-layout: fixed" property .

Try the following code, this should work fine in your case:

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