Building notes, projects, and occasional rants

Dear lazyweb: CSS question

This is something that I want to do for quite some time, but I haven't figure it out how.

If I have a HTML table styled with width: 80% but the total size of the content on each <td> is smaller than the 80% size, then the browser will try to make all the columns the same width, and add extra spaces at the right side of the cell.

What I wanted is to specify that some columns should shrink to the smallest possible size without causing line breaks in the content.

For example in an invoice with 4 fields, item description, quantity, value and sub-total, the default layout would be something like this:

| item        |         10 |         100 |        1000 |

and I wanted this:

| item                               | 10 | 100 | 1000 |

I wonder if there is some CSS combination that does this, that I can apply to a <colgroup> to say "give me the minimal possible width for these columns.

Any tips?