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


Tengo la siguiente tabla 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 ancho de la primera columna en la segunda y tercera fila se ajuste a la longitud del contenido (es por eso que puse width="1px" ahí). 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.

Firefox display

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

IE 9 display

Traté de reemplazar 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?


8
2017-11-29 02:32


origen


Respuestas:


Acabo de probar en mi IE9 y configurar 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 ser porque estás usando métodos más antiguos para mostrar la tabla. Puede intentar diseñar la tabla con bordes, etc. en CSS, como por ejemplo:

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 demás, estoy seguro de que entiendes la idea. esto podría evitar que se muestre automágicamente en la vista de compatibilidad (si es el problema).

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


13
2017-11-29 02:45



Mencionó que intentó 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>

2
2017-11-29 02:34