# Is this the best way to collapse a column width?

Requirements:
When the page (or in the case of the example Frame) expands, the only column to expand with the table should be 'unfrozen' columns (without the 'freeze' class).

here is the live demo The jQuery is there to show dynamic content, it is not the code under review

What I really don't like is that is seems to hacky to just set the width of the column to 1px... I can forsee this causing issues with older/junkier browsers.

HTML

<!-- snippet -->
<tr>
<th class="freeze">id</th>
<th class="freeze">name</th>
<th>description</th>
<th class="freeze">something else</th>
<th class="freeze">actions</th>
</tr>


CSS

.data-table {
width: 100%;
font-size: 90%;
background-color: #fff;
border: 1px solid #666;
}
.data-table th {
white-space: nowrap;
text-align: center;
}
.data-table td {
font-size: 90%;
color: #222;
}
.data-table td:last-child {
white-space: nowrap;
}
.data-table td, .data-table th {
border-right: 1px solid #999;
}
.data-table td:last-child, .data-table th:last-child {
border: none;
}
.data-table tbody tr {
border: 1px solid #666;
}
.data-table tbody tr:nth-child(odd) td {
background-color: #efefef;
}
.freeze {
width: 1px;
}


This works in at least IE8, Chrome 16, and FF8

As long the table doesn't have table-layout: fixed or the cells don't have overflow set to anything else than visible, I don't believe any browser (old or new) would have any problems width this.
The only nitpick I would have, it that the size of 1px feels wrong to me, mostly because this forces the column to wrap as much as possible and depending on the content this may not look very good. I would suggest 1em (purely because it "feels" better :-) and maybe a larger minimal width such as 10em would be suitable for some columns.