Table columns with relative size in HTML5 - css

Question

I have a table with four columns. The first column needs to be the minimum size to fit the content, and the other three columns need to be equal sizes and consume the rest of the space in the table. Neither my table nor my content is of a known size. (It's a pretty standard variable-sized-label-and-fixed-size-data layout.)
In the good old days of HTML4 I could do this by using the specifying the size of each column as a proportion 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're supposed to use CSS instead.
But I haven't found any way to replicate this with CSS; CSS size specifiers only let me specify the width as either a fixed size or a fraction of the whole, where what I actually need is a fraction of what's left after the first column is taken away.
Is there any way to do this using modern techniques? (Note that I can't use CSS3, though.)

Answer 1

I would use a little javascript in order 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 give the size of the overall table. Then go get the size of the first column, and distribute the rest of the width to the other columns.
EDIT: here is a CSS solution. It is not perfect, but better than nothing: http://jsfiddle.net/qR9g2/2/
In the css, the main idea is the following:
.col1{
display:table;
float:right;
}
Add for the first column the tag display:table. This will work like a fit-content for all browsers.
Adding a float:right will push the first column onto the right and "stick" 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 more place then it seems (on the left). (basically if you have a 400px table with 4 columns, it will automatically give 4*100px for each column. adding the upper CSS solution will simply shift the col1 on the right side of the 100px that are given to that column).
You could always try to play with negative left-margins (i don't recommend) in order to shift your table on the left.

Answer 2

var table = document.getElementById('table');
var first_col = document.getElementById('first-col');
var total_col = document.getElementsByClassName('col').length
var rem_width = table.offsetWidth - first_col.offsetWidth;
var col = document.getElementsByClassName('col')
for(let i=0;i<col.length;i++){
col[i].style.width=rem_width/total_col+'px'
}
<table id="table" width="100%" border="1">
<tr>
<th id="first-col">NO</th>
<th class="col">ISBN</th>
<th class="col">Title</th>
<th class="col">Price</th>
</tr>
<tr>
<td>12</td>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>

Answer 3

Instead of trying to do a table, you can try a grid layout as follows.
Apologies for the inline css - obviously you would use classes instead but I just tested it quickly and it actually appears to work! I had not actually ever used this before, but making the first column "auto" actually does work and the layout is I think what you are looking for.
<div style="display:grid; grid-template-columns: auto repeat(3, 1fr);">
<div style="width: fit-content">This should fit the content that you decide to insert here</div>
<div>This should fit the content too</div>
<div>This should fit the content .. more text</div>
<div>This should fit the content and some more text</div>
</div>
I checked & grid has been around since 2011 so it's not too modern hopefully. I almost always do my tables with either grid or flexbox now..