Подогнать ширину ячейки под содержимое

Учитывая следующую разметку, как я могу использовать CSS, чтобы одна ячейка (все ячейки в столбце) соответствовала ширине содержимого внутри нее, а не растягивалась (что является поведением по умолчанию)?

<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

РЕДАКТИРОВАТЬ: я понимаю, что я мог бы жестко кодировать ширину, но я бы предпочел не делать этого, так как контент, который будет помещен в этот столбец, является динамическим.

Глядя на изображение ниже, первое изображение - это то, что производит разметка. Второе изображение - это то, что я хочу.

Я не уверен, что понимаю ваш вопрос, но я сделаю удар. JSfiddle из примера .

HTML:

<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

CSS:

td{
    border:1px solid #000;
}

tr td:last-child{
    width:1%;
    white-space:nowrap;
}

настройка

max-width:100%;
white-space:nowrap;

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

Для меня это лучшая автоподгонка и авторазмер для таблицы и ее столбцов (используйте css! Важно ... только если вы не можете без нее)

.myclass table {
    table-layout: auto !important;
}

.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
    width: auto !important;
}

Не указывайте ширину CSS для таблицы или столбцов таблицы. Если содержимое таблицы больше, оно будет превышать размер экрана до.

Установка ширины CSS в 1% или 100% элемента в соответствии со всеми спецификациями, которые я смог выяснить, связана с родителем. Хотя Blink Rendering Engine (Chrome) и Gecko (Firefox) на момент написания, кажется, хорошо справляются с этим 1% или 100% (уменьшают столбцы или столбец, чтобы заполнить доступное пространство), это не гарантируется в соответствии со всеми спецификациями CSS Я мог бы найти, чтобы сделать это правильно.

Один из вариантов - заменить таблицу на CSS4 flex div:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Это работает в новых браузерах, т.е. IE11 + см. Таблицу внизу статьи.

Есть много способов сделать это!

поправьте меня, если я ошибаюсь, но вопрос заключается в поиске такого результата.

<table style="white-space:nowrap;width:100%;">
<tr>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:auto">this should be the content width</td>
</tr>
</table>

Первые 2 поля будут «разделять» оставшуюся страницу (ПРИМЕЧАНИЕ: если вы добавите больше текста в 50% полей, это займет больше места), а последнее поле будет постоянно доминировать в таблице.

Если вы готовы разрешить перенос текста, вы можете переместить пробел: nowrap; Чтобы стиль 3-го поля
был единственным способом начать новую строку в этом поле.

В качестве альтернативы, вы можете установить длину в последнем поле, т.е. width: 150px, и оставьте процент в первых двух полях.

Надеюсь это поможет!

Просто :

    <div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>