Comment tronquer uniformément les cellules d'un tableau tout en maximisant la visibilité du contenu ?

Comment tronquer les cellules d'un tableau tout en maximisant la visibilité du contenu

La troncature des cellules d'un tableau peut être une technique utile pour optimiser la disposition du tableau et garantir que le contenu est affiché clairement dans la largeur disponible. Cependant, cela peut être frustrant lorsque des cellules avec des largeurs de contenu variables sont tronquées de manière inégale.

Dans l'exemple donné, la cellule avec plus de contenu est tronquée tandis que l'autre cellule conserve toute sa largeur. Pour résoudre ce problème, nous pouvons utiliser une technique CSS pour répartir l'espace plus uniformément entre les cellules.

La solution consiste à envelopper les cellules dans un élément colgroup avec des largeurs de colonnes définies. Nous définissons la largeur de la première colonne à 100 % et de la deuxième colonne à 0 %. Cela garantit que la première colonne occupe autant d'espace que possible tandis que la deuxième colonne reste masquée.

Dans les cellules, nous appliquons des styles CSS pour contrôler le débordement de texte. Nous définissons white-space: nowrap pour empêcher le retour à la ligne du texte et text-overflow: ellipsis pour tronquer tout texte en excès. De plus, nous limitons la largeur maximale de la première colonne à 1 px pour l'empêcher de s'étendre au-delà de l'espace disponible.

En combinant ces techniques, nous obtenons une disposition de tableau où les cellules débordent uniformément, avec uniquement le contenu nécessaire. étant tronqué. Cela permet une répartition plus équilibrée de l'espace et garantit que autant de contenu que possible est visible dans le tableau.

Code CSS :

<code class="css"><style>
table {
  width: 100%;
}

colgroup {
  col width="100%";
  col width="0%";
}

td {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 1px;  /* Restrict the width of the first column to 1px */
}
</style></code>

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!