Envelopper les données tabulaires en HTML

J'ai des données avec une rangée d'en-têtes et une ou plusieurs lignes de valeurs que je veux afficher. Actuellement, j'utilise un tableau HTML, mais j'ai rencontré des situations où j'ai tellement de colonnes, la table disparaît à la fin de l'écran. Ou que certains noms de colonne sont si longs (ils sont généralement juste un seul mot qui a des espaces de soulignement), même s'il n'y a pas autant de colonnes, la table disparaît toujours à la fin de la fenêtre du navigateur.Envelopper les données tabulaires en HTML

Ce que je veux, c'est pouvoir afficher toutes les données sans avoir à faire défiler horizontalement. Même si cela signifie briser les données en plusieurs tables.

Actuellement, j'utilise Embedded Perl, et une solution hackish que j'ai utilisée est de simplement coder en dur 8 colonnes par table, et commencer une nouvelle table sous la première si nécessaire. Mais idéalement, ce que je veux, c'est mettre dynamiquement autant de colonnes que possible sur une même table, et envelopper dans une nouvelle ligne de lignes/tables/tout ce qui est nécessaire.

Est-ce que cela peut être fait HTML/CSS seulement? Ou dois-je calculer d'une façon ou d'une autre combien de largeur chaque colonne prendra, et baser mon nombre de colonnes par table là-dessus? Je n'ai pas besoin d'utiliser des tables HTML, donc s'il y a une meilleure solution, je suis plus que disposé à l'utiliser.

Source

2009-04-23 accelerate

Comment savez-vous quelle taille est trop grande? Que faire si l'utilisateur redimensionne la fenêtre de son navigateur? Cela ressemble à un problème javascript, pas un problème perl ... – Tanktalus

En utilisant table { display: inline; } combiné avec un tableau par colonne devrait résoudre votre problème. Exécutez ceci et chargez la sortie dans un navigateur Web. Lorsque vous redimensionnez la fenêtre, les colonnes qui ne correspondent pas s'affichent. Vous pouvez utiliser un class avec les tables si vous ne souhaitez pas que toutes les tables soient affectées.

#!/usr/bin/perl 

use strict; 
use warnings; 

print "<html><head><style>table { display: inline }</style></head><body>"; 
for my $col (1 .. 100) { 
    print "<table><tr><th>$col</th></tr>"; 
    for my $row (1 .. 10) { 
     print "<tr><td>$row</td></tr>"; 
    } 
    print "</table>"; 
} 
print "</body></html>";

Source

2009-04-23 21:38:38

Merci! J'ai essayé et j'ai trouvé que ça marchait plutôt bien. J'ai une question supplémentaire. Est-ce que je peux avoir toutes les tables dans une rangée donnée pour prendre toute la largeur (du navigateur ou un div)? À l'heure actuelle, si j'ai plusieurs rangées de tables, le côté droit sera entièrement décalé, en fonction de la largeur des tables individuelles de cette rangée. Ce n'est pas un gros problème, mais ce serait bien que la table la plus à droite de chaque rangée soit alignée verticalement. – accelerate

Il n'y a aucun moyen de savoir à l'avance quelles lignes seront à la fin, il n'y a donc aucun moyen de les aligner. –

Ce que vous pouvez faire est de définir une largeur sur chaque colonne en fonction du nombre de colonnes que vous avez. La meilleure solution aurait une largeur en pourcentage, de sorte que la largeur de la table peut changer à mesure que la largeur de la page change.

Source

2009-04-23 20:40:51

Si vous créez plusieurs tables, je suppose que cela va vous obliger à faire défiler verticalement la page pour voir toutes les données.

Une autre solution peut être d'envelopper la table dans un div, de définir une largeur sur la div, et de définir le débordement de cette div pour faire défiler. De cette façon, toute la page ne défilera pas horizontalement, mais la div contenant la table aura une barre de défilement.

Source

2009-04-23 20:55:59 kbosak

Envelopper les données tabulaires en HTML

Répondre

Questions connexes