¿Cómo hacer que la celda de la tabla se encoja según el contenido?

Question

¿Cómo puedo hacer la tabla con 2 columnas (células) se parece a esto:

• primera célula es reducir el tamaño de acuerdo con el contenido
• la otra celda se ajusta al resto de la mesa (más ancho que ambos contenidos en conjunto)

Ejemplo:

<table style="width: 500px;"> 
    <tr> 
     <td>foo</td> 
     <td>bar</td> 
    </tr> 
</table> 

necesito la mesa para tener este aspecto:

.___________________________________________________________________________. 
| foo | bar   <a lot of space here>        | 
|_____|_____________________________________________________________________| 
          500 px total width 

Aviso: No conozco el ancho de "foo", así que no puedo configurar "50px", "10%" o algo así.

Answer 1

Puede configurar el width de la segunda célula a 100%

HTML:

<table> 
    <tr> 
     <td>foo</td> 
     <td class="grow">bar</td> 
    </tr> 
</table>​ 

CSS:

table { width: 500px; } 
.grow { width: 100%; }​ 

Comprobar this fiddle a cabo.

Answer 2

Si el tamaño total de la tabla es de 500 píxeles y no pasará, ponga td{max-width: 500px;}; Si el valor mínimo es 500 píxeles, td {min-width: 500px;}; Mira esto exemple.

Answer 3

conjunto

td{ 
max-width:100%; 
white-space:nowrap; 
} 

se va a resolver problema ur ..

Answer 4

Sé que esto se le pidió hace años. El OP probablemente ya lo haya resuelto. Pero esto podría ser útil para alguien. Así que estoy publicando lo que funcionó para mí. Esto es lo que hice con el mío. Establecí el ancho a cualquier valor cercano a cero, para reducirlo, luego configuré el espacio en blanco para que se acabase. Resuelto

td { 
width:0.1%; 
white-space: nowrap; 
}