CSS to make a table column take up as much room as possible, and other cols as little

Question

I need to layout a html datatable with CSS.

The actual content of the table can differ, but there is always one main column and 2 or more other columns. I'd like to make the main column take up as MUCH width as possible, regardless of its contents, while the other columns take up as little width as possible. I can't specify exact widths for any of the columns because their contents can change.

How can I do this using a simple semantically valid html table and css only?

For example:

| Main column                           | Col 2 | Column 3 |
 <------------------ fixed width in px ------------------->
 <------- as wide as possible --------->
 Thin as possible depending on contents: <-----> <--------> 

Answer 1

Similar to Alexk's solution, but possibly a little easier to implement depending on your situation:

<table>
    <tr>
        <td>foo</td>
        <td class="importantColumn">bar</td>
        <td>woo</td>
        <td>pah</td>
    </tr>
</table>

.importantColumn{
    width: 100%;
}

You might also want to apply white-space:nowrap to the cells if you want to avoid wrapping.

Answer 2

I'm far from being a CSS expert but this works for me (in IE, FF, Safari and Chrome):

td.zero_width {
    width: 1%;
}

Then in your HTML:

<td class="zero_width">...</td>