¿Cómo hacer que el ancho de una columna se ajuste a su contenido en la tabla HTML?

Question

tengo el siguiente cuadro en mi HTML:

<div style="max-width:700px;"> 
    <table border="1"> 
     <tr><td colSpan="2">this is a loooooooooooooooong text</td></tr> 
     <tr><td width="1px">a:</td><td >b</td></tr> 
     <tr><td width="1px">c:</td><td >d</td></tr> 
    </table> 
<div> 

Quiero que el primer ancho de columna en la segunda y tercera fila para adaptarse simplemente la longitud del contenido (por eso puse width="1px" allí). Mientras tanto, quiero que el ancho de la tabla solo se ajuste a la longitud del contenido más largo de la tabla (que es la primera fila) en lugar de abarcar el máximo ancho de su div límite.

Funciona en Firefox como se muestra a continuación.

Sin embargo, en el IE 9 no funciona como se espera, como se muestra.

Me trataron de sustituir width="1px" con width="1%". Pero entonces el ancho de la tabla abarcará el ancho máximo del div principal.

¿Alguien sabe cómo solucionarlo en IE?

Answer 1

Acabo de probar en mi IE9, y establecer el ancho para 1px funciona. Pero se muestra como se presentó arriba en modo de compatibilidad. ¿Has declarado tu doctype y todas las otras cosas divertidas?

Puede deberse a que está utilizando métodos más antiguos para mostrar la tabla. Usted podría intentar estilizar la tabla con bordes y así sucesivamente en CSS - tales como:

table, td, tr, th{ 
    border:1px solid #f0f; 
} 

.onepx{ 
    width:1px; 
} 



<div style="max-width:700px;"> 
    <table> 
    <tr><td colspan="2">this is a loooooooooooooooong text</td></tr> 
    <tr><td class="onepx">a:</td><td>b</td></tr> 
    <tr><td class="onepx">c:</td><td>d</td></tr> 
    </table> 
<div> 

y así sucesivamente - Estoy seguro de que usted consigue la idea. esto podría evitar que se muestre automágicamente en la vista de compatibilidad (si es el problema).

Y, por último, porque IE9 es tan estúpido, tendrá que desactivar la vista de compatibilidad (si está habilitada en la página), porque todas las páginas dentro del dominio se verán en la vista de compatibilidad.

Answer 2

Mencionó que ha intentado configurarlo al 1%, ¿configuró el otro al 99%?

<tr><td width="1%">a:</td><td width="99%">b</td></tr> 
<tr><td width="1%">c:</td><td width="99%">d</td></tr>