How to make table cell shrink according to the content?

Question

How can I make the table with 2 columns (cells) look like this:

• First cell is shrink according to the content
• The other cell fits the rest of the table (wider than both contents together)

Example:

<table style="width: 500px;">    <tr>       <td>foo</td>       <td>bar</td>    </tr> </table> 

I need the table to look like this:

.___________________________________________________________________________. | foo | bar            <a lot of space here>                                | |_____|_____________________________________________________________________|                            500 px total width 

Notice: I don't know the width of "foo" so I cannot set "50px", "10%" or something like that.

Answer 1

Set the width to anything near zero, to shrink it, then set the white-space to nowrap. Solved.

td { width:0.1%; white-space: nowrap; }