Les données du tableau provoquant défilement horizontal

J'ai une table sur une page Web, avec (par exemple) 8 colonnes, et il a travaillé très bien jusqu'à récemment ...Les données du tableau provoquant défilement horizontal

Un utilisateur enregistré avec une adresse e-mail pour un nom d'affichage (pas un gros problème, mais l'email est énorme). Maintenant, comme l'une des colonnes est un 'nom d'utilisateur', toutes les pages avec cet utilisateur ont maintenant une énorme colonne 'reporté par' ...

Je dois aussi souligner, la largeur de la table était de 100% (moins une «marge») avant cette question, et cela a très bien fonctionné).

Y a-t-il une manière intelligente d'introduire un saut de ligne sur un '.' ou un '@'? Sinon, comment les gens se débrouillent-ils normalement? Des solutions intéressantes à ce problème ennuyant sont les bienvenues!

Source

2010-01-29 Dave

Lorsque vous générez votre table html code de contenu, tronquer chaque contenu extrait de votre base de données à une largeur maximale. Votre fonction de tronquage peut facilement ajouter une info-bulle donnant l'étiquette complète.

Vous pouvez également le faire en javascript sur pageload. Analyser chaque cellule de tableau et tronquer le contenu s'il est trop grand. Ce n'est pas aussi agréable que tronquer côté serveur, cependant.

L'avantage est que vous pouvez donner l'étiquette complète dans une info-bulle, ajoutez « ... » pour l'utilisateur que l'étiquette est tronquée, etc.

Source

2010-01-29 09:52:16 Alsciende

Bonne idée, je devrais penser à tronquer les données de l'appel de base de données tb h! La seule chose qui arrête cela est la ligne 'filter' de la table, utilisée pour l'évidence, qui garde les largeurs de la table, ou qui risque d'affecter la fonctionnalité du filtre. Je suis sûr que je serai capable de faire quelque chose ensemble pour le contourner! Salutations pour l'entrée de hte – Dave

Vous pouvez définir un max-width sur la colonne et overflow:scroll ou même overflow:hidden.

Source

2010-01-29 09:24:38

C'est une solution agréable et probablement le meilleur I » Je vais le mettre en œuvre pour le moment et voir comment ça se passe. Je suspecte un débordement: le caché sera le plus agréable. Merci – Dave

Après avoir testé cela, d'autres complications surviennent :(Chaque colonne a un filtre (sous la forme d'un menu déroulant) en haut, et ils sont maintenant coupés ... Si je pouvais (en quelque sorte) raccourcir le menu déroulant, de sorte Je pouvais voir la flèche, alors je pouvais m'en tirer avec ça, je suis sûr ... – Dave

Difficile à dire sans voir le code ... Le contenu du menu filtre est-il dynamique? Si non, alors vous pourriez probablement s'en tirer en augmentant simplement le max-width (en em plutôt que px, de sorte que le menu continue de s'adapter si sa taille de police change) –

Utilisez la propriété css table-layout.

table-layout: fixed;

http://www.quirksmode.org/css/tables.html#tablelayout

Source

2010-01-29 09:28:05 emmychan

Cela doesn ' Je travaille pour moi, car la largeur d'une rangée dans la table est plus grande que l'écran - il y a 12 colonnes et deux contiennent des entrées massives non-cassées – Dave

Les données du tableau provoquant défilement horizontal

Répondre

Questions connexes