How to make table cell shrink according to the content?

css, html, html-table, width

Solution

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.

Problem

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.

Original source