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 (w

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;
} 

Answer 2

If the total size of the table is 500 pixels and will not pass, put td{max-width: 500px;}; If the minimum value is 500 pixels, td {min-width: 500px;}; Look this exemple.

Answer 3

Set this:

td {
    max-width:100%;
    white-space:nowrap;
}

This will solve your problem.

Answer 4

You can set the width of the second cell to 100%

HTML:

<table>
   <tr>
      <td>foo</td>
      <td class="grow">bar</td>
   </tr>
</table>​

CSS:

table { width: 500px; }
.grow { width: 100%; }​

Check this fiddle out.