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

266

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

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

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

введите описание изображения здесь

html css html-table

— Mansfield
источник

Я не понимаю ваш вопрос. Вы хотите ограничить последний столбец определенной шириной?

— MetalFrog

8

@diEcho Я думал, что это было довольно ясно. Я добавлю картинку или две.

— Мэнсфилд

Возможный дубликат CSS столбца таблицы Автоширина

— Vadzim

451

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

— MetalFrog
источник

3

почему ты пишешь <table style="width:100%">вместо<table width="100%" >

— diEcho

17

@diEcho Я не писал ту часть, которая была из примера кода. В любом случае, использование атрибута width в элементах является плохой практикой. В этом быстром примере встроенный CSS в порядке, но его следует абстрагировать в файл, если это был код производственного уровня.

— MetalFrog

45

Более чистым способом сделать это IMO было бы определение стиля, называемого «ностретч» (или что-то в этом роде), а затем просто определить ностретч в CSS, чтобы иметь ширину: 1% и nowrap. Тогда последний TD будет иметь 'class = "блок ностретч" ". Таким образом, вы можете «ностричь» любую клетку, какую захотите.

— Тим Холт

3

Это хорошее решение, но, к сожалению, в Bootstrap 3 мои группы кнопок будут перенесены из этого: jsfiddle.net/wexdX/326 Любые идеи, как я могу это подавить?

— Мартин Браун

5

Это работает только тогда, когда содержание шире, чем ширина: 1% - верно? Потому что, если содержимое меньше, чем width: 1%, ячейка будет больше.

— Адам

44

настройка

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

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

— Шубхам Нигам
источник

8

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

— ои
источник

3

Установка ширины 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 + см. Таблицу внизу статьи.

— Младен Адамович
источник

1

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

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

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

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

— Кристиан Ньюман
источник

-1

Просто :

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

— Парт Яни
источник