HTML5 Relative Size Table Columns

Question

I have a table with four columns. The first column must be the smallest size to fit the content, and the remaining three columns must be equal in size and consume the rest of the space in the table. Neither my table nor my content has a specific size. (This is a pretty standard layout with variable size and label.)

In the good old days of HTML4, I could have done this by specifying the size of each column as a fraction of the whole, using the "relative size" functionality:

<colgroup> <col width="0*"/> <col width="1*"/> <col width="1*"/> <col width="1*"/> </colgroup> 

However, the width attribute is now deprecated, and we should use CSS instead. But I did not find a way to reproduce this using CSS; CSS size specifiers allow me to specify width as a fixed size or fraction of an integer, where what I really need is part of what remains after the first column is taken away.

Is there a way to do this using modern methods? (Note that I cannot use CSS3.)

Answer 1

I would use a little javascript to solve your problem: http://jsfiddle.net/qR9g2/

 var tableSize = 400; // example of size var firstCol = document.getElementById('firstCol_01'); var sizeOfFirstCol = firstCol.offsetWidth; var myOtherCols = document.getElementsByTagName('td'); var nbcols = myOtherCols.length; var sizeOtherCols = (tableSize-sizeOfFirstCol)/(nbcols-1); for(var i=0;i<nbcols; i++) { if(myOtherCols[i].className === 'otherCols') { myOtherCols[i].style.width = sizeOtherCols+'px'; } } 

first indicate the size of the overall table. Then go to the size of the first column and distribute the rest of the width in the other columns.

EDIT: here is a CSS solution. This is not perfect, but better than nothing: http://jsfiddle.net/qR9g2/2/

In css, the main idea is this:

 .col1{ display:table; float:right; } 

Add a display:table tag for the first column. This will work as fit-content for all browsers. Adding float:right will cause the first column to be on the right and “snap” it to the rest of the table.

The visual result is exactly what you want. On the negative side, the problem is that your table takes up more space than it seems (left). (basically, if you have a 400px table with 4 columns, it will automatically produce 4 * 100px for each column. adding the top CSS solution will just shift col1 on the right side of the 100px that will be provided to this column).

You can always try to play with the negative left margins (I do not recommend) to shift the table to the left.