Faire une grille de table vraiment digne d'un destop (comment afficher suffisamment de lignes vides pour remplir la grille de la table)

Question

Je suis vraiment préoccupé par l'aspect esthétique de mon application web et c'est pourquoi je demande ce genre de stupide question. Pardonnez-moi d'avance si vous pensez que ce n'est pas si grave.

Je suis en train de créer une application Web comme sur un bureau et d'utiliser le plugin génial jqGrid pour afficher des données tabulaires. Dans les applications de bureau comme iTunes, la table a suffisamment de lignes vides pour remplir ses dimensions. Je veux dire que si vous définissez une grille de table à 500px en hauteur et qu'elle n'a qu'une seule ligne, la table (zèbre) continuera à la fin de la page. C'est quelque chose que je veux avoir mais que je ne peux pas accomplir maintenant en utilisant javascript ou css.

Ma première idée était de faire de l'image de fond à la table qui simule les lignes vides, mais il y a deux problèmes pour cette méthode. D'abord cela ne fonctionnera pas si l'utilisateur zoome et agrandit le texte et ensuite je montre des bordures entre les colonnes qui sont réalisables ce qui rend impossible de les répliquer en arrière-plan.

Est-ce que quelqu'un a déjà essayé de faire ce genre de grille de table? Une idée de comment le faire?

Answer 1

Ce que je ferais est simplement de créer un conteneur de table avec une hauteur spécifique; lui donner un fond carrelé verticalement; définir overflow à scroll/auto; puis placez la table de taille dynamique à l'intérieur de celle-ci.

Editer: Désolé, je n'ai pas lu votre question avec assez de soin. Compte tenu de vos autres exigences, je voudrais simplement utiliser JavaScript. Il ne devrait pas être difficile de définir un nombre minimum de lignes sur votre table, bien que je ne sois pas familier avec jqgrid.

L'autre option consiste simplement à utiliser 2 tables - la première pour les données réelles, la plus basse pour les lignes vides. Chaque fois qu'une ligne est ajoutée à la table supérieure, une est retirée de la table du bas et vice versa. Vous devrez également capturer les événements de redimensionnement des colonnes de la table supérieure et redimensionner les colonnes de la table du bas. Mais c'est assez cludgy.