Make "Greedy" Table Cell?

I have a row in a table that has 3 cells in it with values A, B, and C and the table is the full width of the screen, which is more than enough room for all 3. Right now, when they dis开发者_JAVA技巧play, all cells are getting 1/3 of the room, but this isn't what I want. I want the 2nd and 3rd cells to be their "correct" size, and the first cell to take up the difference. I can't just set the width on them because they are dynamically sized. How can I do this?

Just set the width of the table to 100%, the width of A to 100% and B and C to auto. Tested and working

<table border="1px" width="100%">
    <tr>
        <td width="100%">A</td>
        <td width="auto">BB</td>
        <td width="auto">CCC</td>
    </tr>
</table>

Code A and C in pixels and give B a width of 100%

Rune's answer with Pistos' comment got me close. The last step was to add style="white-space:nowrap" to the non-greedy columns, giving:

<table border="1px" width="100%">
    <tr>
        <td width="100%">A wide column</td>
        <td style="white-space:nowrap">Compact column 1</td>
        <td style="white-space:nowrap">Another compact column</td>
    </tr>
</table>

Works for me in Firefox 25.

I tried Diodeus and Rune's methods, but it didn't work for my example. I ended up doing a merge on cells B and C as I couldn't really find anything. Thanks for your help.

Try,

<table border="1px" width="100%">
    <tr>
        <td width="100%" height="100" style="background:#ff0000; display:block">A</td>
        <td width="100%" height="100" style="background:#00ff00; display:block">BB</td>
        <td width="100%" height="100" style="background:#ff00ff; display:block">CCC</td>
    </tr>
</table>