Erstellen eines wirklich destopartigen Tabellenrasters (wie man genug leere Zeilen zeigt, um die Höhe des Tabellenrasters zu füllen)

Question

Ich bin wirklich besorgt über den ästhetischen Aspekt meiner Web-App und darum frage ich diese Art von albern Frage. Vergib mir im Voraus, wenn du denkst, dass es nicht so viel ist.

Ich baue eine Desktop-ähnliche Web-App und verwende jqGrid awesome Plugin, um einige Tabellendaten anzuzeigen. In Desktop-Anwendungen wie iTunes hat die Tabelle genügend leere Zeilen, um ihre Dimensionen zu füllen. Ich meine, wenn Sie das Tabellenraster auf 500 Pixel in der Höhe einstellen und es nur eine Zeile hat, wird die Tabelle (Zebra) bis zum Ende der Seite fortgesetzt. Dies ist etwas, das ich haben möchte, aber nicht jetzt mit Javascript oder CSS erreichen kann.

Meine erste Idee war es, ein Hintergrundbild zu erstellen, das die leeren Zeilen vortäuscht, aber es gibt zwei Probleme für diese Methode. Erstens wird es nicht funktionieren, wenn der Benutzer zoomen und den Text größer machen wird und zweitens zeige ich einige Grenzen zwischen Spalten, die realisierbar sind, was es unmöglich macht, sie im Hintergrundbild zu replizieren.

Hat jemand jemals versucht, eine solche Art von Tabellenraster zu machen? Irgendeine Idee, wie es geht?

Answer 1

Ich würde einfach einen Tabellencontainer mit einer bestimmten Höhe erstellen; gebe ihm einen vertikal gekachelten Hintergrund; Set overflow bis scroll/auto; und dann legen Sie die dynamisch große Tabelle darin.

Bearbeiten: Sorry, ich habe Ihre Frage nicht sorgfältig genug gelesen. Angesichts Ihrer anderen Anforderungen würde ich einfach JavaScript verwenden. Es sollte nicht schwierig sein, eine Mindestzahl von Zeilen für Ihren Tisch festzulegen, obwohl ich mit jqgrid nicht vertraut bin.

Die andere Option ist nur zwei Tabellen zu verwenden - die oberste für die eigentlichen Daten, die untere für leere Zeilen. Jedes Mal, wenn eine Zeile zur obersten Tabelle hinzugefügt wird, wird eine aus der unteren Tabelle entfernt und umgekehrt. Sie müssen außerdem die Spaltengrößenereignisse der obersten Tabelle erfassen und die Spaltengröße der unteren Tabelle ebenfalls ändern. Aber das ist ziemlich Cluddy.