Comment faire pour redimensionner automatiquement les HTML cellule de tableau pour s'adapter à la taille du texte

Question

J'ai une table avec 2 lignes et de colonnes variables. J'ai essayé width = 100% pour la colonne. Donc, le premier contenu dans la vue de s'adapter. Mais supposons que si je suis l'évolution du contenu de manière dynamique, alors il n'est pas dynamiquement augmenter/diminuer la table HTML taille de la colonne. Merci à l'avance.

Answer 1

Si vous souhaitez que les cellules redimensionner en fonction du contenu, alors vous ne devez pas spécifier une largeur de la table, les lignes, ou les cellules.

Si vous ne voulez pas de retour automatique à la ligne, d'attribuer le style CSS white-space: nowrap pour les cellules.

Answer 2

Vous pouvez essayer ceci:

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