Comment tronquer uniformément les cellules d'un tableau en cas de débordement de contenu ?

Tronquer uniformément les cellules du tableau

Fred, une table avec un espace d'appartement fluctuant, fait face au défi d'adapter différents contenus dans ses cellules. Face à un contenu excessif, Fred a recours à la troncature du contenu d'une cellule pour éviter de dépasser la largeur du tableau. Cependant, il soupçonne qu'une meilleure solution pourrait exister, dans laquelle toutes les cellules contribueraient de manière égale à la troncature du contenu.

Pour répondre aux préoccupations de Fred, l'approche suivante peut être utilisée :

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

Dans cette solution :

• L'élément colgroup est introduit pour spécifier deux colonnes : une avec une largeur de 100 % pour occuper la majeure partie de la largeur du tableau, et une avec une largeur de 0 % pour faire office de cellule flexible.
• La première cellule a l'espace blanc : style nowrap pour éviter les sauts de ligne, text-overflow : points de suspension pour tronquer le contenu et overflow : caché pour masquer le contenu supplémentaire.
• Le maximum -width : le style 1px sur la première cellule garantit qu'elle n'occupera que la largeur nécessaire, laissant l'espace restant pour la deuxième cellule.
• La deuxième cellule utilise un espace blanc : nowrap pour conserver son original width.

Cette approche garantit que lorsqu'il y a suffisamment d'espace, toutes les cellules afficheront leur contenu complet. Cependant, lorsque l'espace est insuffisant, le contenu de la première cellule sera tronqué en premier, donnant à la deuxième cellule un espace supplémentaire pour afficher son contenu.

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!