Pavel S. Pavel S. - 1 year ago 75
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)


<table style="width: 500px;">

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 Source

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


      <td class="grow">bar</td>


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

Check this fiddle out.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download