Question

Dans mon exemple, j'ai une table où chaque ligne est un utilisateur par exemple. Les colonnes pourraient inclure leur nom, leur adresse, leur adresse électronique, etc. Je dois maintenant ajouter une colonne pour (exemple hypothétique) le nom de leur chat. Alors que la plupart des gens n'auront pas de chats et que certaines personnes auront 1 ou 2 chats, il y aura une personne occasionnelle avec 20 chats qui créeront une très longue rangée dans la table. Cela me pose un problème de présentation et de filtrage / recherche de noms de chats. Existe-t-il une bonne solution pour afficher ce type de données?

Était-ce utile?

La solution

Affichez normalement les 50 premiers caractères du champ, puis insérez le reste dans un bloc dont la visibilité est masquée via CSS. Incluez un lien / bouton / icône qui permettra à l’utilisateur de basculer la visibilité de manière à ce qu’il puisse voir la valeur entière.

Autres conseils

Plusieurs options:

  1. Définissez une largeur maximale pour la cellule et laissez les données envelopper
  2. Placez le contenu à l'intérieur d'une balise wrapper (telle qu'une div) et définissez-la avec une largeur / hauteur fixe et un style de dépassement de capacité: masqué pour garantir qu'un mot particulièrement long ne force pas la largeur de la cellule.
  3. tronque le texte de sortie côté serveur

Pour les cas n ° 2 et n ° 3, définissez l'attribut Title de la balise TD pour qu'il contienne le texte complet non tronqué. Cela se présentera comme une info-bulle lors du survol de la cellule.

Je mentionnerais d'autres solutions basées sur CSS, mais elles ne sont que très peu prises en charge pour le moment, il est donc inutile de les mentionner.

Vous voudrez peut-être essayer de faire quelque chose comme ce que fait SO. À savoir, une fois que quelqu'un atteint un certain point dans son représentant, il suffixe le nombre et l'apprixe. Ex. 10k au lieu de 10 236.

Ainsi, les chiffres ne deviennent pas incontrôlables.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top