it-swarm.com.ru

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

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

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

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

enter image description here

224
Mansfield

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

Настройка

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

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

37
Shubham Nigam

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

7
myset

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

2
Mladen Adamovic

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

.d-inline-block {
    display: inline-block!important;
}
0
Arun Prasad E S

Просто :

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