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   |
+--------------------------------------+-------------+------------+

What i understand is that you want text wrap when there is large data in cell and when data is short it should fit in with no white spaces ? — MSUH, May 31 '12 at 13:11
@MSUH I edited my post to try and clarify. I want even long words to wrap if they're too long. If there's space left the best would be to evenly distribute it on the tables. — olofom, Jun 01 '12 at 07:28

score 1 · Answer 1 · answered May 31 '12 at 13:15

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');
    }

});

answered May 31 '12 at 13:15

Alex Ball

4,404
2
17
23

Them problem with this solution is that you set the width to a pixel value and I do not know how many columns there will be and how wide they should be. There might be 20 columns with a table width of 768px, there might be two columns with the table width of 1080px... and this JS could be done with CSS very easily: `table#t2 td { max-width: 300px; }` :) – olofom Jun 01 '12 at 08:17
Could you calculate the number of column in a table and the width of screen or document, and substitute max-width: 100px with this proportion? this could be a solution? – Alex Ball Jun 01 '12 at 08:42
I'm not sure that will work. Consider this scenari: I have 10 columns and 1000px in width. The first 9 columns only need 10px each and the 10th can easily use 910px. What should be the max-width? They could also be 1/10th each. So the max-width should be 910px or perhaps 100px? – olofom Jun 01 '12 at 12:41
I have not had much time to try anyway mean a thing [JsFiddle](http://jsfiddle.net/zDNTx/) – Alex Ball Jun 01 '12 at 14:11
Thanks, it's a good start. One problem is still that the short "asd" words get broken into three lines while the long lines have more than 30 characters per line. I'd like the short words to be full long as possible. Think of it as having layout:fixed but with the empty spaces in the short columns transferred to the longer columns. – olofom Jun 01 '12 at 15:03
I'm sorry, but now I have not much time, could you try to change the weight of single cell in accordion of your needs, with some condition, recalculate the single cell weight. ;-) – Alex Ball Jun 01 '12 at 15:14

score 0 · Answer 2 · edited Jun 27 '12 at 07:20

0

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

Try the following code, this should work perfectly 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' });
  });
});

edited Jun 27 '12 at 07:20

ahren

16,803
5
50
70

answered Jun 27 '12 at 06:13

Naveen Chandra Tiwari

5,055
3
20
26

Table with dynamic columns but layout fixed

2 Answers2