Lassen Sie JSP-Seite mit dynamisch generierter HTML-Tabelle mit unbekannter Zeilenanzahl.
Verfügen über eine Eigenschaft im Back-End, mit der die maximale Anzahl von Zeilen festgelegt wird, z. B .: max_rows = 15 .
Wie schränkt man die Anzahl der Zeilen für die HTML-Tabelle auf max_rows ein? Der andere Teil der Tabelle sollte durch vertikales Scrollen zugänglich sein, dh der Benutzer sieht 15 Zeilen und wenn er nach unten scrollt, sieht er andere Zeilen der Tabelle.
Es kann empirisch gemacht werden, indem die durchschnittliche Höhe der Zeile berechnet wird und die Eigenschaft max-height für div-wrapper verwendet wird, aber ich denke, dieser Ansatz ist nicht sehr stabil.
Also muss man sich auf die Anzahl der Zeilen verlassen. Vielleicht gibt es Plugin für einen solchen Fall oder es ist Standard CSS oder HTML-Lösung?
Dies kann mit Standard-HTML, CSS und ein wenig Javascript erfolgen. Es kann für Clients, bei denen Javascript deaktiviert ist, auch zu einem Qualitätsverlust führen. Damit meine ich, dass sie nur die ursprüngliche Tabelle sehen, die nicht durch Scrollbalken verändert wurde. Versuchen Sie etwas wie folgt:
%Vor%Dies wurde in Firefox, Chrome und IE 7 getestet, aber es sollte alle modernen Browser funktionieren. Beachten Sie, dass es egal ist, wie groß der Inhalt jeder Zeile ist oder wie viel die einzelnen Zellen gefüllt sind. Wenn Sie border-collapse: collapse in Ihrer Tabelle nicht verwenden möchten, müssen Sie Code in die for-Schleife einfügen, um den Zellenabstand zu berücksichtigen.
Wenn Sie dickere Ränder haben, ersetzen Sie die JavaScript-Funktion durch diese:
%Vor%Der try / catch-Befehl behandelt die Unterschiede zwischen IE und anderen Browsern. Der Code im Catch ist für IE.
Bearbeiten : Das vorgeschlagene Problem wird dadurch nicht gelöst. Ich habe den Teil in der Frage vermisst, dass der Benutzer scrollen muss, um den Rest der Zeilen zu sehen. Hoppla. Also, ich nehme an, dass js wirklich benötigt wird.
Das kann eigentlich ohne Javascript gemacht werden. Der Trick ist die Verwendung von nth-child(x) :
Der Grenz-Kollaps wird benötigt, damit die Grenze nicht über die versteckten Zeilen hinausreicht.
Hier ist die Geige .
Es gibt keine Möglichkeit, dies nur mit CSS und HTML zu tun, Sie brauchen auch Javascript. Ermitteln Sie die Höhe der obersten 15 Zeilen und begrenzen Sie die Höhe eines umhüllenden Bereichs auf diese Höhe. Überlauf setzen: Auto auf dem Div, um Ihre Bildlaufleisten zu erhalten.
Vergessen Sie nicht, eine Standardhöhe für das div als Fallback festzulegen, wenn Javascript deaktiviert ist.
Platzieren Sie Ihre Tabelle in einem Div-Block und verwenden Sie CSS, um die Höhe und die Überlaufeigenschaft des Div anzugeben.
%Vor%Auf diese Weise hat das div eine feste Höhe und der Browser wird eine Bildlaufleiste hinzufügen, wenn der Inhalt des div-Blocks zu hoch ist.
Ich habe die Höhe auf 15em eingestellt, was 15 * Schrifthöhe entspricht. Bei der Verwendung von Rahmen, Paddings und anderen Elementen ist diese Höhe nicht korrekt. Aber es kann besser (in px) für Ihr Design berechnet werden.
Tags und Links html html-table max row