Ширина ячейки по размеру содержимого
учитывая следующую разметку, как я могу использовать 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: я понимаю, что мог бы жестко закодировать ширину, но я бы предпочел этого не делать, так как содержимое, которое будет идти в этом столбце, является динамическим.
глядя на изображение ниже, первое изображение-это то, что создает разметка. Второй образ - это то, что я хотеть.
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;
}
для меня это лучший 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 + см. таблицу в нижней части статьи.