Prioritizing table columns in HTML

Question

Is there a way to prioritize one table column in HTML? The thing is, I've got 4 columns, and the content may change a lot for the content in all cells. But I want the first column to take up as much space as possible, so the 3 other columns only use as much width as they need to keep everything on one line.

The table itself has a fixed width.

Answer 1

Assign a class to the three last cells in each row like this: <td class="tight">. Now, add CSS like this to your stylesheet:

td.tight
{
    width: 1px;
    white-space: nowrap;
}

The width rule instructs your cell to be as narrow as possible, and the white-space rule dictactes that the contents of the cell should never wrap across several lines.

This solution assumes, that the table is styled to have some fixed width (possible 100%).