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

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>

Answer 2

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 3

I've not had success with width: 100%; as it seems that without a container div that has a fixed width this will not get the intended results. Instead I use something like the following and it seems to give me my best results.

.column-fill { min-width: 325px; }

This way it can get larger if it needs to, and it seems that the browser will give all the extra space to whichever column is set this way. Not sure if it works for everyone but did for me in chrome (haven't tried others)... worth a shot.