Comment obtenir un ajustement optimal du contenu dans les cellules d'un tableau avec des tailles de contenu variables ?

Tronquer les cellules d'un tableau avec un ajustement optimal du contenu

Lorsque nous sommes confrontés à des cellules de tableau dont le contenu est de différentes tailles, il devient difficile de les afficher uniformément sans compromettre la lisibilité. La table de Fred sert d'exemple à ce sujet. Pour résoudre les largeurs inégales des cellules, Fred a implémenté des propriétés CSS telles que white-space: nowrap et table-layout:fixed, forçant les cellules à déborder plutôt que d'affecter leurs homologues adjacentes.

Cependant, cette approche n'a résolu que partiellement le problème de Fred. . La cellule de droite, Celldito, comportait souvent des espaces, tandis que la cellule de gauche restait tronquée. Pour remédier à ce problème, Fred a recherché une solution qui répartirait uniformément les largeurs de cellule, en exploitant tout espace disponible dans Celldito pour optimiser la visibilité du contenu de la cellule de gauche.

Une technique efficace pour obtenir le résultat souhaité par Fred consiste à manipuler le groupe de colonnes du tableau ( ) et en appliquant un style supplémentaire aux cellules. L'implémentation ci-dessous garantit que :

• Les cellules ont une hauteur fixe (largeur 100%) qui n'affecte pas leurs voisines immédiates.
• Les cellules ont une colonne secondaire (largeur : 0%) , qui sert d'espace réservé masqué, empêchant la première colonne de se réduire à une largeur nulle.
• Le débordement de la cellule de gauche est masqué et son contenu tronqué à l'aide de points de suspension, permettant à la cellule de droite d'utiliser n'importe quel espace disponible.

Extrait de code :

<code class="html"><table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">
            This cell has more content...
        </td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table></code>

Cette approche basée sur CSS donne à Fred le résultat souhaité, en optimisant la visibilité du contenu dans les deux cellules tout en évitant les largeurs de cellule inégales.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!