4
\$\begingroup\$

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 -->
    <thead>
        <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>
    </thead>

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

\$\endgroup\$
4
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ Good suggestions, thankyou! \$\endgroup\$ – rlemon Dec 22 '11 at 15:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.