How to set column width to be as small as possible? - css

Question

I'm trying to set the last three columns to be as small as possible since they're just holding icons/links for actions.
I'd also want to the large text columns to have as much of the remaining width as possible.
Here's what I was able to find, but didn't work for me:
Two columns table : one as small as possible, the other takes the rest
This solution doesn't work for me because I have multiple columns that I want to take up as much space as possible, so I can't set any of them to width = 100%.
force column size to smallest possible
I tried using relative lengths (width="*"), but it doesn't seem to have any effect. Maybe it's because I didn't set any widths prior so there's no 'remaining width' to distribute out?
HTML:
<table>
<colgroup class='data' span='5'>
<col class='date' span='1'/>
<col class='id' span='1'/>
<col class='title' span='1'/>
<col class='status' span='1'/>
<col class='description' span='1'/>
</colgroup>
<colgroup class='action' span='3'>
<col class='show' span='1'/>
<col class='edit' span='1'/>
<col class='delete' span='1'/>
</colgroup>
<tr>
<th>Date</th>
<th>ID</th>
<th>Title</th>
<th>Status</th>
<th>Description</th>
<th colspan='3'></th>
</tr>
<tr>
<td class='date'>medium</td>
<td class='id'>medium</td>
<td class='title'>large</td>
<td class='status'>medium</td>
<td class='description'>large</td>
<td class='show'>small</td>
<td class='edit'>small</td>
<td class='delete'>small</td>
</tr>
</table>
CSS:
table {
width: 100%;
}
table td.title, td.description {
text-align: left;
}
table td.date, td.id, td.status {
text-align: center;
}
table td.show, td.edit, td.delete {
}
table colgroup.action col {
width:"1*";
}
table colgroup.data col {
width:"*";
}
So in the order of priority:
table spans entire width of parent container
the last three icon/action columns to be as small as possible without any cutoff
the columns with 'large' data (class title and description) should take up as much of the remaining space as possible
the columns with 'medium' data should be the size of their content with some margin on both sides (I don't mind just throwing in a fixed width if it's too difficult to accomplish this)
I don't need the colgroup and col tags, but I just left them in here in case they can be useful. I've tried different permutations of using and not using them, but still can't seem to get it to work. I also thought about using percents for the data columns, but I'd want the browser to determine the widths based on the actual content rather than me imposing predefined rules that might not be optimal.

Answer 1

For the columns you want to shrink, set the width to 1 px:
table {
width: 100%;
}
th, td {
border: 1px solid #eee;
}
td.title, td.description {
text-align: left;
}
td.date, td.id, td.status {
padding: 0 10px;
text-align: center;
width: 1px;
}
td.show, td.edit, td.delete {
width: 1px;
}
Then you can get rid of the colgroups altogether.
See demo here.
By the way, you might consider using CSS flexible boxes instead.

Answer 2

To answer one of your requests:
the last three icon/action columns to be as small as possible without
any cutoff
To do this, I would float the tds or set them to display:inline-block;
If you know the size of the icons you are using, you can then set the width on the th above the icons (which I would call class="icons").
If you don't know the width, you could calculate using some jQuery.
var a = $('td.show').width();
var b = $('td.edit').width();
var c = $('td.delete').width();
$('.icons').css('width', a+b+c+6+"px");
Example: http://jsfiddle.net/KQs2K/1/
Extra 6px needed to pad out the border bits I threw in the example
Note: these tds will stack when the screen size gets real small.