Ajustar ancho de celda al contenido

Dado el siguiente marcado, ¿cómo podría usar CSS para forzar que una celda (todas las celdas de la columna) se ajuste al ancho del contenido dentro de ella en lugar de estirarla (que es el comportamiento predeterminado)?

<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>

EDITAR: Me doy cuenta de que podría codificar el ancho, pero prefiero no hacerlo, ya que el contenido que irá en esa columna es dinámico.

Mirando la imagen de abajo, la primera imagen es lo que produce el marcado. La segunda imagen es lo que quiero.

No estoy seguro si entiendo tu pregunta, pero lo intentaré. JSfiddle del ejemplo .

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;
}

Ajuste

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

Resolverá su problema.

Para mí, este es el mejor ajuste automático y tamaño automático para la tabla y sus columnas (use css! Important ... solo si no puede hacerlo sin)

.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;
}

No especifique el ancho de CSS para la tabla o para las columnas de la tabla. Si el contenido de la tabla es mayor, pasará al tamaño de la pantalla.

Establecer el ancho de CSS en 1% o 100% de un elemento de acuerdo con todas las especificaciones que pude descubrir está relacionado con el padre. Aunque Blink Rendering Engine (Chrome) y Gecko (Firefox) en el momento de la escritura parece manejar bien ese 1% o 100% (reducir el tamaño de las columnas o una columna para llenar el espacio disponible), no está garantizado de acuerdo con todas las especificaciones CSS Pude encontrar para representarlo correctamente.

Una opción es reemplazar la tabla con CSS4 flex divs:

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

Eso funciona en nuevos navegadores, es decir, IE11 + ver tabla en la parte inferior del artículo.

¡Hay muchas maneras de hacer esto!

corrígeme si me equivoco pero la pregunta está buscando este tipo de resultado.

<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>

Los primeros 2 campos "compartirán" la página restante (NOTA: si agrega más texto a cualquiera de los campos del 50%, ocupará más espacio), y el último campo dominará la tabla constantemente.

Si está contento de dejar que el texto se ajuste, puede mover el espacio en blanco: nowrap; al estilo del tercer campo
será la única forma de comenzar una nueva línea en ese campo.

alternativamente, puede establecer una longitud en el último campo, es decir. ancho: 150 px, y deja porcentajes en los primeros 2 campos.

¡Espero que esto ayude!

Sencillo :

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