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.

Solution 1

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.

Solution 2

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

Solution 3

Set this:

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

This will solve your problem.

Solution 4

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.

View more solutions

Comments

[Zenexer]

This only works if table-layout is set to auto on the table. This is the default, but it's common to set table-layout to fixed, which will cause the 100% value to be taken literally (the cell will span the entire table, and all cells will overlap).

[Reggie Pinkham]

Thanks! Interestingly, a width of 0 doesn’t have any effect, but your 0.1% appears to be a nice hack to achieve this.

[SnailCoil]

personally, I went with width: 1px. great idea Nat!

[kiltek]

when I resize the fiddle window containing the html output, it does not grow at all.

[Admin]

<table style='white-space:nowrap'> shrink it to the content. Don't set width on the first cell!

[Jason Butera]

Nice solution for compact data, but doesn't work so well if you happen to require longer content to wrap in one cell

[Turbo]

@SnailCoil The 1px doesn't work when other columns are using percentages that are adding up to less than 100%. My columns can be dynamically hidden so they can't always add to 100% (and didn't want to recalculate). Nat's answer works great and fixes a problem I've had for over a year.

[F. Geißler]

Hacky but nice solution. Thanks!

[Cory Mawhorter]

to save others the trouble, this seems to have the same problem with table-layout: fixed as above