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.

回答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.

回答2:

I know this was asked years ago. The OP probably have solved it by now. But this could still be helpful to someone. So I'm posting what worked for me. Here's what I did with mine. I 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;
}

回答3:

Set this:

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

This will solve your problem.

回答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.

来源：https://stackoverflow.com/questions/11413365/how-to-make-table-cell-shrink-according-to-the-content

标签

html

css

html-table

width