tamaño - ancho de una columna de una tabla html

Ajustar el ancho de la celda al contenido

Question

Dado el siguiente marcado, ¿cómo podría usar CSS para forzar que una celda (todas las celdas en la columna) se ajuste al ancho del contenido en lugar de estirar (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.

Answer 1

Ajuste

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

resolverá tu problema

Answer 2

Establecer el ancho de CSS en 1% o 100% de un elemento de acuerdo con todas las especificaciones que pude averiguar está relacionado con el padre. Aunque Blink Rendering Engine (Chrome) y Gecko (Firefox) en el momento de escribir parecen manejar ese 1% o 100% (hacer que una columna se contraiga o una columna para llenar el espacio disponible), no está garantizado de acuerdo con todas las especificaciones de CSS Pude encontrarlo para renderizarlo 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.

Answer 3

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

Answer 4

Para mí, este es el mejor ajuste automático y autorizar para la tabla y sus columnas (¡use css! Importante ... 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 css para la tabla o para las columnas de la tabla. Si el contenido de la tabla es más grande, pasará por encima del tamaño de la pantalla.