Ich habe drei divs. Kopfzeile, Zentrale und Fußzeile. Es gibt eine Tabelle im zentralen div (Gridview), die fast immer länger ist als das äußere div. Also habe ich diese Div vertikal scrollbar gemacht. Die Frage ist: Wie kann ich Tabellenheader machen, dass es sichtbar wäre, nachdem Div nach unten gescrollt wurde? Ich hätte diesen Header mit separaten div oder table machen können und es fixieren lassen, aber die Spaltenbreiten in der Tabelle sind nicht immer gleich - daher weiß ich nicht, wie man die Spaltenbreiten im Header dann verwaltet. Irgendwelche Hinweise?
Ich habe gerade ein jQuery-Plugin zusammengestellt, das genau das tut, was Sie wollen. Es ist sehr klein und wirklich einfach zu implementieren.
Alles, was benötigt wird, ist eine Tabelle, die ein thead und tbody hat.
Sie können diese Tabelle in einem DIV mit einem Klassennamen umbrechen, und die Tabelle wird immer so skaliert, dass sie in dieses div passt. Wenn zum Beispiel Ihr div mit dem Browserfenster skaliert, wird dies auch für die Tabelle gelten. Die Kopfzeile wird beim Scrollen fixiert. Die Fußzeile wird fixiert (wenn Sie eine Fußzeile aktivieren). Sie haben auch die Möglichkeit, die Kopfzeile in der Fußzeile zu klonen und sie zu reparieren. Auch wenn Sie Ihr Browser-Fenster zu klein machen und alle Spalten nicht passen ... wird es auch horizontal scrollen (Header auch).
Sie übergeben einfach den Klassennamen des DIV an das Plugin: $ ('. myDiv'). fixedHeaderTable ({footer: true, footerId: 'myFooterId'}); und das Plugin erledigt den Rest. FooterID ist ein Element auf der Seite, das das Markup für Ihre Fußzeile enthält. Dies wird verwendet, wenn Sie die Seitennummerierung als Fußzeile verwenden möchten.
Wenn Sie mehrere Tabellen auf der Seite haben, funktioniert es auch für jede Tabelle, für die Sie eine feste Kopfzeile haben möchten.
schau es dir hier an: Ссылка
Denken Sie daran, es ist immer noch "Beta", so dass ich täglich neue Funktionen und Bugfixes hinzufügen.
Unterstützte Browser: IE6, IE7, IE8, FireFox, Safari und Chrome
Lösung ist wirklich einfach. Sie benötigen 3 DIVs: einen allgemeinen Container (in meinem Fall der Klasse "outer"), einen Tabellencontainer (in meinem Fall der Klasse "inner") und einen DIV, in dem Sie mit jQuery oder javaScript einen Klon einer vorhandenen Tabelle erstellen ( in meinem Fall der Klasse "header").
Lösung verwendet CSS und einige Zeilen jQuery-Code, der HTML von "inner" in "header" klont und seine Breite und Höhe festlegt. Unterstützt feste und variable Spaltenbreite. Getestet mit IE8, Firefox 9, Safari und Google Chrome.
Hier ist ein Beispielcode:
Sie müssten den Header außerhalb des scrollbaren div platzieren. Alles innerhalb der div wird scrollen.
BEARBEITEN
Bezüglich der Breite, wenn Sie für einen separaten Header gehen, kann ich ein paar Lösungen sehen:
Ich habe das erste nicht wirklich versucht, und es könnte die Dinge ein wenig verkomplizieren. Es ist etwas zu versuchen, wenn Sie verzweifelt für den Effekt sind.
Ich sollte auch erwähnen, dass es wahrscheinlich Javascript-Bibliotheken mit Tabellen-Widgets gibt, die das bereits tun. Schau sie dir an, um zu sehen, wie sie es machen.
Hier ist eine nette Lösung (meistens CSS), die Spalten mit fester Breite verwendet: Ссылка
Und hier ist ein bisschen jQuery-Code, um Zellenbreiten zu fixieren, wenn Zelleninhalte mehr Breite als die feste Breite haben:
%Vor%Die Ausgabe ist ein wenig aus im IE, wenn eine nicht-strikte DTD verwendet wird. Ändern Sie die Breite im CSS, wenn Sie den Standardmodus nicht verwenden können.
Beachten Sie, dass der jQuery-Code die Tabellenbreite am Ende erhöht und die horizontale Bildlaufleiste deaktiviert. Sie können oder wollen nicht das.
Sie können versuchen, das jQuery-Plugin Dummkopfzeile zu verwenden. Die Technik ist im Grunde die gleiche: klonen Sie einen Header und legen Sie ihn auf die Tabellenebene.
Was Sie eigentlich machen möchten, ist, dass <tbody> der Datentabelle scrollbar ist, so dass die <thead> und <tfoot> natürlich unverändert bleiben.
Das ist für FF et al. trivial:
%Vor%IE hat strenge und komplexe Probleme mit tbody im Allgemeinen. Es kann mit Ausdrücken gelöst werden, aber es ist nicht-trivial und spezifisch für das Design.
Ich habe das nicht getestet, aber vielleicht könntest du die Tabelle zweimal erstellen, einmal im Header und einmal im Scroll-Div. Dann machen Sie in der Kopfzeile alle Zeilen mit Ausnahme der Überschrift Zeile unsichtbar. Vielleicht mit 'display: none' oder setze ihre Höhe auf Null.
Diese Lösung funktioniert mit CSS in Firefox und den anderen Gecko-Browsern und CSS-Ausdrücken in IE.
Die Kopf- und Fußzeile bleiben nicht in Opera oder Safari / Chrome fixiert, aber die ganze Tabelle ist scrollbar, so dass sie benutzbar ist. Beachten Sie, dass die Spalten im Beispiel des Autors eine prozentuale Breite haben, aber sie können entfernt werden.
Wenn Sie mit Opera / Safari / Chrome-Unterstützung experimentieren möchten, sehen Sie sich die tbody-Anzeige an: blockieren und gehen Sie von dort aus.
Sehen Sie sich die YUI Data Table an, wenn Sie nach einer umfassenden browserübergreifenden Implementierung suchen. Ich glaube, das wird getan, indem eine andere Tabelle mit übereinstimmenden Spaltenbreiten erstellt wird.
Es scheint Tricks zu geben, um die Spaltenbreiten zu fixieren. Wenn ich mich richtig erinnere, benötigt Firefox & lt; col / & gt; Tags vorhanden sein.
Auf jeden Fall wurden in YUI DataTable (50k Zeilen) viele Tricks angewendet. Du solltest gut daran sein, es anzuschauen und zu entscheiden, wie weit du damit alleine gehen möchtest.
Tags und Links html scroll asp.net html-table