Ширина ячейки по размеру содержимого

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

4 ответов


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

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


для меня это лучший autofit и autoresize для таблицы и ее столбцов (используйте 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 divs:

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

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