Pavel S. Pavel S. - 1 month ago 4
CSS Question

How to make table cell shrink according to the content?

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

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.

Comments