How to make table cell shrink according to the content?

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.

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

Related