Ajustar ancho de celda al contenido

266

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.

ingrese la descripción de la imagen aquí

html css html-table

— Mansfield
fuente

No entiendo tu pregunta. ¿Desea limitar la última columna a un ancho específico?

— MetalFrog

8

@diEcho Pensé que estaba bastante claro. Agregaré una foto o dos.

— Mansfield

Posible duplicado del ancho automático de la columna de la tabla CSS

— Vadzim

451

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

— MetalFrog
fuente

3

por qué escribes en <table style="width:100%">lugar de<table width="100%" >

— diEcho

17

@diEcho No escribí esa parte, que era del código de ejemplo. De todos modos, es una mala práctica usar el atributo ancho en los elementos. En este ejemplo rápido, el CSS en línea está bien, pero debe resumirse en un archivo si se trata de código de nivel de producción.

— MetalFrog

45

Una forma más limpia de hacer esta OMI sería definir un estilo llamado "nostretch" (o algo así), y luego simplemente definir nostretch en el CSS para que tenga un ancho: 1% y el nowrap. Entonces el último TD tendría 'class = "nostretch block"'. De esa manera puede "estirar" cualquier celda que desee.

— Tim Holt

3

Esta es una buena solución, pero lamentablemente, en Bootstrap 3 mis grupos de botones se ajustarán a esto: jsfiddle.net/wexdX/326 ¿ Alguna idea de cómo puedo suprimirlo?

— Martin Braun

55

Esto solo funciona cuando el contenido es más ancho que ancho: 1% - ¿verdad? Porque si el contenido es más pequeño que el ancho: 1%, la celda será más grande.

— Adam

44

Ajuste

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

Resolverá su problema.

— Shubham Nigam
fuente

8

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.

— myset
fuente

3

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.

— Mladen Adamovic
fuente

1

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

— Christian Newman
fuente

-1

Sencillo :

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

— Parth Jani
fuente