espacio - tablas en html5

Cómo cambiar automáticamente el tamaño de la celda de la tabla HTML para que se ajuste al tamaño del texto

Question

Tengo una tabla con 2 filas y columnas variables. Intenté ancho = 100% para la columna. Entonces, el primer contenido de la vista encajará. Pero supongamos que si estoy cambiando los contenidos dinámicamente, entonces no aumenta ni reduce dinámicamente el tamaño de la columna de la tabla HTML. Gracias por adelantado.

Answer 1

Puedes intentar esto:

HTML

<table>
    <tr>
        <td class="shrink">element1</td>
        <td class="shrink">data</td>
        <td class="shrink">junk here</td>
        <td class="expand">last column</td>
    </tr>
    <tr>
        <td class="shrink">elem</td>
        <td class="shrink">more data</td>
        <td class="shrink">other stuff</td>
        <td class="expand">again, last column</td>
    </tr>
    <tr>
        <td class="shrink">more</td>
        <td class="shrink">of </td>
        <td class="shrink">these</td>
        <td class="expand">rows</td>
    </tr>
</table>

CSS

table {
    border: 1px solid green;
    border-collapse: collapse;
    width:100%;
}

table td {
    border: 1px solid green;
}

table td.shrink {
    white-space:nowrap
}
table td.expand {
    width: 99%
}

Answer 2

Si desea que las celdas cambien su tamaño según el contenido, no debe especificar un ancho para la tabla, las filas o las celdas.

Si no desea el ajuste de palabras, asigne el white-space: nowrap estilo CSS white-space: nowrap a las celdas.