Comment résoudre la troncature des cellules d'un tableau tout en conservant des largeurs de cellules cohérentes et en maximisant l'affichage du contenu ?

Résoudre la troncature des cellules d'un tableau tout en maximisant l'affichage du contenu

Dans le domaine de la disposition des tableaux, le problème de la troncature des cellules se pose lorsque le contenu d'une cellule dépasse sa largeur désignée. Une solution simple consiste à tronquer le contenu, en fournissant des points de suspension (...) pour indiquer que l'information complète n'est pas visible. Cependant, cette approche peut conduire à des largeurs de cellules inégales, laissant certaines cellules avec un espace excessif.

Pour relever ce défi, nous pouvons utiliser une technique qui garantit que les cellules débordent uniformément, seulement une fois qu'elles ont épuisé leur espace disponible.

Solution de code :

L'extrait de code suivant illustre cette approche :

<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.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.
        </td>
        <td style="white-space: nowrap;">
            Less content here.
        </td>
    </tr>
</table></code>

Explication :

1. Groupe de colonnes (colgroup) :

   • Nous définissons deux colonnes en utilisant , la première colonne occupant 100 % de la largeur et la deuxième colonne avec 0% de largeur. Cela nous permet de contrôler les largeurs des deux cellules.

2. Styles de cellules de tableau :

   • Le la première cellule a les attributs de style suivants :

     • white-space: nowrap : empêche le contenu de s'enrouler sur plusieurs lignes
     • text-overflow:ellipsis : tronque le contenu avec des points de suspension
     • overflow : caché : masque le contenu débordant
     • max-width:1px : fournit une largeur initiale minimale pour la cellule, garantissant qu'elle ne s'effondre pas entièrement

3. Deuxième cellule du tableau :

   • La deuxième cellule contient un espace blanc : nowrap, empêchant le retour à la ligne du contenu et garantissant que la deuxième colonne respecte sa largeur de 0%.

En fixant la largeur maximale de la première colonne à 1 pixel, elle devient le point "le plus faible" du tableau. Au fur et à mesure que le tableau se rétrécit horizontalement, la première cellule franchit ce seuil de largeur et commence à tronquer, s'adaptant à l'espace rétréci sans affecter la largeur de la colonne de la deuxième cellule.

Résultat :

Cette approche offre les avantages suivants :

• Les cellules débordent uniformément, ce qui donne des largeurs constantes.
• Les cellules ne sont tronquées que lorsqu'elles ont épuisé tous leurs espaces.
• Le le contenu de la deuxième cellule est conservé même lorsque le tableau se réduit considérablement.

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!