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

I know this was asked years ago. The OP probably have solved it by now. But this could still be helpful to someone. So I'm posting what worked for me. Here's what I did with mine. I 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;
}