CODEWITHSUNDEEP
htmlcsshtml-tablewidth
Pavel S.
Pavel S.

Reputation: 12332

How to make table cell shrink according to the content?

How can I make the table with 2 columns (cells) look like this:

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.

Upvotes: 89

Views: 119069

Answers (4)

Nat Julian Belza
Nat Julian Belza

Reputation: 1209

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

Upvotes: 110

Shubham Nigam
Shubham Nigam

Reputation: 3944

Set this:

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

This will solve your problem.

Upvotes: 5

scumah
scumah

Reputation: 6383

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.

Upvotes: 68

Filipe Manuel
Filipe Manuel

Reputation: 995

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.

Upvotes: 1

Related Questions