Приміряйте ширину комірки до вмісту

З огляду на наступну розмітку, як я можу використовувати 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: Я розумію, що міг би важко зашифрувати ширину, але я б краще цього не зробив, оскільки вміст, який міститиметься в цьому стовпці, динамічний.

Дивлячись на зображення нижче, перше зображення - це те, що створює розмітка. Другий образ - це те, що я хочу.

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

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

Для мене це найкраще автоматичне налаштування та автоматичне розмір таблиці та його стовпців (використовуйте 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:

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

Це працює в нових браузерах, тобто IE11 + див. Таблицю внизу статті.

Є багато способів зробити це!

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

<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-го поля
буде єдиним способом розпочати новий рядок у цьому полі.

альтернативно, ви можете встановити довжину на останньому полі, тобто. ширина: 150 пікс., а залишок у перших двох полях залишити.

Сподіваюсь, це допомагає!

Простий:

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