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

    
        
            id
            name
            description
            something else
            actions
        
    

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 {
    padding: 6px;
    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

IMHO it's completely fine to set the width like this. Table cell widths have always be defined to be a "minimum width".

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.

StackExchange Code Review Q#7081, answer score: 4