Как заставить ячейку таблицы сокращаться в соответствии с содержимым?

Как сделать таблицу с двумя столбцами (ячейками) следующим образом:

Первая ячейка сжимается в соответствии с содержимым
Другая ячейка соответствует остальной части таблицы (более широкой, чем оба содержания вместе)

Пример:

<table style="width: 500px;">
   <tr>
      <td>foo</td>
      <td>bar</td>
   </tr>
</table>

Мне нужно, чтобы таблица выглядела так:

.___________________________________________________________________________.
| foo | bar            <a lot of space here>                                |
|_____|_____________________________________________________________________|
                           500 px total width

Примечание. Я не знаю ширины "foo", поэтому я не могу установить "50px", "10%" или что-то в этом роде.

Ответ 1

Вы можете установить width второй ячейки на 100%

HTML:

<table>
   <tr>
      <td>foo</td>
      <td class="grow">bar</td>
   </tr>
</table>

CSS

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

Отметьте эту скрипту вне.

Ответ 2

Я знаю, что это задавали много лет назад. Вероятно, ОР решил его решить. Но это может быть полезно кому-то. Поэтому я отправляю то, что сработало для меня. Вот что я сделал с моим. Я установил ширину для чего-то близкого к нулю, чтобы сжать ее, а затем установить белое пространство для nowrap. Решаемые.

td {
width:0.1%;
white-space: nowrap;
}

Ответ 3

Установите это:

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

Это решит вашу проблему.

Ответ 4

Если общий размер таблицы составляет 500 пикселей и не пройдет, поставьте td{max-width: 500px;}; Если минимальное значение составляет 500 пикселей, td {min-width: 500px;}; Посмотрите пример.