Ich habe die folgende Tabellenstruktur:
%Vor%Ich versuche, die Kopfzeile so zu fixieren, dass, wenn ich nach unten scrolle, diese sichtbar bleibt. Ich schaute diesen Beitrag an, konnte ihn aber nicht verstehen. Wie kann ich das machen?
Ich habe den folgenden Code geschrieben, um mein Ziel zu erreichen (wie in Frage gestellt) -
Hier ist das Plugin, das ich geschrieben habe.
%Vor%Verwendung:
%Vor%hoffe, es wird jemandem irgendwo helfen ..
Ich danke Ihnen allen für Ihre freundliche Unterstützung ...:)
Versuchen Sie diesen Ansatz, aber es ist möglicherweise nicht der beste Weg
%Vor%was ich getan habe, ist nur eine andere Tabelle für den Header erstellt und gab ihm eine feste Position
Verwenden von CSS
%Vor%Und rufen Sie diese Klasse im oder im gridview headerrowstyle -Tag auf.
Ich musste also eine ähnliche Komponente für meine Arbeit erstellen. ( Hinweis: Ich habe dies zwar mit jQuery gemacht, aber es kann trotzdem ohne es durchgeführt werden.)
Die Lösung, die ich gefunden habe, war ähnlich und ich dachte, ich würde es teilen, da es viel einfacher ist
Grundsätzlich wickeln Sie die table in eine div , kopieren Sie sie (die Tabelle) und machen Sie die erste nur eine Kopftabelle (indem Sie die tbody entfernen) und positionieren Sie sie absolut.
und das CSS
%Vor% Dann erstellt das JavaScript im Grunde das colgroups (oder Sie können sie serverseitig erzeugen, wenn Sie brauchen.) Legt die Breiten und Viola fest. Das scheint in meinem Kopf viel einfacher zu sein, also mach weiter und sieh dir das Spiel an.
Ich weiß, dass ich zu spät zur Party komme, aber die jQuery Fixed Table Header Plugin von Mustafa OZCAN ist fantastisch. Fügen Sie es einfach ein, wie auch jQuery selbst, und legen Sie es so fest, dass es auf Ihrer Tabelle funktioniert:
%Vor% Ersetzen Sie #YourTable durch die ID Ihrer HTML-Tabelle und das Plugin erledigt den Rest.
Ach, wie beneide ich Leute, die jQuery benutzen können. Ich habe eine reine Javascript- und CSS-Lösung für diejenigen erstellt, die durch Anwendungsbeschränkungen daran gehindert werden, eine Bibliothek zu laden.
Grundsätzlich positioniert CSS die Tabellen- und Tabellenkopfzeile und trickst die Tabelle so, dass sie sich wie Divs verhält. Dann manipuliert Javascript die CSS-Positionierung der Tabellenkopfzeile und ein "mask" -Div, das die sich bewegenden Zeilen verbirgt, wenn die Tabelle nach oben scrollt (eine Verbesserung bestünde darin, das JavaScript so zu modifizieren, dass Kollisionen erkannt werden und Zeilen, die über den Header nach oben scrollen).
Die Schwäche dieses Ansatzes besteht darin, dass Sie jetzt die Breite für alle Spalten festlegen müssen.
Die relevanten Komponenten sind:
%Vor%Hier ist eine Demo in jsFiddle: Ссылка
Nun, ich hoffe, dass jemand das liest und etwas Zeit damit spart :) Mein Ziel war es, eine kleine (so klein wie möglich) js zu machen, die tableID übernimmt und Header als fixed setzt. Es unterscheidet sich von dem, was hier angegeben wird, dass es die Breite mit window.resize neu berechnet, so dass Tabellen dynamisch skaliert werden können und keine festen Größen von Anfang an verwendet werden. Und theoretisch - nehme an, mit jedem Tisch zu arbeiten ... (das war mein Fall ...)
%Vor%Tags und Links javascript html jquery css html-table