Установите ширину ячейки в контент

Учитывая следующую разметку, как я могу использовать 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>

EDIT: Я понимаю, что могу жестко кодировать ширину, но я бы предпочел не делать этого, поскольку содержимое, которое будет отображаться в этом столбце, является динамическим.

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

enter image description here

ОТВЕТЫ

Ответ 1

Я не уверен, понимаю ли я ваш вопрос, но я возьму на него удар. 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;
}

Ответ 2

Настройка

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

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

Ответ 3

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

.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 для таблицы или столбцов таблицы. Если содержимое таблицы больше, оно будет превышать размер экрана.

Ответ 4

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

Один из вариантов заключается в замене таблицы на гибкие разделители CSS4:

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

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

Ответ 5

Это решило мою проблему

.d-inline-block {
    display: inline-block!important;
}

Ответ 6

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

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

<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, и оставьте процент в первых 2 полях.

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

Ответ 7

Просто:

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