Wie kann ich beim Scrollen die erste Zeile und die erste Spalte einer Tabelle sperren, eventuell mit JavaScript und CSS?
Wie kann ich eine Tabelle erstellen, hat seine erste Zeile und die erste Spalte, die sowohl verschlossen, als wenn Sie in Excel aktivieren 'Fenster fixieren'? Ich brauche die Tabelle um beide scrollen horizontal und vertikal (eine Menge von Lösungen für diese gibt, sondern erlauben nur vertikale scrollen).
Also, wenn Sie einen Bildlauf nach unten in der Tabelle, die erste Zeile wird bleiben, da es die überschriften der Spalten. Dies kann am Ende wird in einer thead
oder kann es nicht, was macht die Lösung einfacher.
Wenn Sie nach rechts scrollen, die erste Spalte bleibt gesetzt, da es hält die Etiketten für die Zeilen.
Ich bin mir ziemlich sicher, dass dies nicht mit CSS allein, aber kann jemand mich in Richtung eine JavaScript-Lösung? Es muss funktionieren in allen wichtigen Browsern.
InformationsquelleAutor der Frage pkaeding | 2008-11-17
Du musst angemeldet sein, um einen Kommentar abzugeben.
Naja, ich schaute aufwärts für scrollbare Tabelle mit fester Spalte, zu verstehen, dass dieses spezifischen Anforderungen und Ihre Frage war eine von es mit nicht schließen Antworten..
Ich diese Frage beantwortet Große Größe dynamisch html-Tabelle mit einer festen Blättern Sie Zeilen-und fixed scroll-Spalte inspiriert zu präsentieren meine Arbeit als plugin https://github.com/meetselva/fixed-table-rows-cols
Das plugin im Grunde konvertiert eine formatierte HTML-Tabelle, um eine scrollbare Tabelle mit festen header-Tabelle und Spalten.
Die Nutzung ist als unten,
Können Sie die demo und Dokumentation hier
InformationsquelleAutor der Antwort Selvakumar Arumugam
Brauchst du zwei Tabellen, wobei die erste ist eine exakte überlagerung über den zweiten. Die zweite enthält alle Daten, von denen der erste enthält nur die erste Spalte. Sie synchronisieren müssen und es ist in Breite und je nach Inhalt auch die Höhe der Zeilen.
Zusätzlich zu diesen zwei Tabellen, die Sie brauchen, in einem Dritten. Das ist die erste Zeile, die liegt genau zwischen den beiden anderen und synchronisiert werden auf die gleiche Weise.
Müssen Sie absolute Positionierung hier. Als Nächstes würden Sie synchronisiert das scrollen der Daten-Tabelle mit den Blättern Positionen der Kopf-Zeile und die erste Spalte der Tabelle.
Die sehr gut funktioniert in allen gängigen Browsern, mit einer Ausnahme: Der synchronisierte Bildlauf flattern. Um dies zu beheben, müssen Sie zwei outher div-Container, halten einen Klon der Inhalt der header-Zeile und der ersten Spalte. Beim scrollen vertikal, zeigen Sie die Kopfzeile Klon zu verhindern, flattern, während Sie die Position des original in den hintergrund.
Wenn Sie horizontal scrollen, würden Sie die erste Zeile Klon. Gleiche Sache hier.
InformationsquelleAutor der Antwort Thanks
Ich habe meine jQuery-plugin-Lösung hier: Frozen table-header-inside scrollbaren div
Es tut genau, was Sie wollen, und ist wirklich leicht und einfach zu bedienen.
InformationsquelleAutor der Antwort Mark
Gibt es sehr wenige cross-browser-Lösungen für das heute, unter denen SuperTabledie ich mag, wegen Ihrer Eleganz und Einfachheit (jetzt fortgesetzt mit MooGrid) und SlickGrid mit seiner genial Reihe von Funktionen.
InformationsquelleAutor der Antwort Amnon
Hier ein plugin JQuery: https://github.com/nitsugario/jQuery-Freeze-Table-Column-and-Rows
Dies ist ein jQuery-plugin, das machen die Zeilen und Spalten der Tabelle nicht scrollen. Es kann eine bestimmte HTML-Tabelle-Objekt und stellen Sie es so es einfrieren kann, die eine bestimmte Anzahl von Zeilen oder Spalten oder beides, damit die Feste Spalten oder Zeilen nicht scrollen. Die Zeilen, die eingefroren werden sollten gesetzt werden in der Tabelle head-Bereich. Es können auch die freeze-Zeilen und Spalten zusammen mit colspan oder rowspan-Attribute.
InformationsquelleAutor der Antwort Agustin
Würden Sie haben, um es zu testen, aber wenn Sie eingebettet in einem iframe in Ihrer Seite verwendet CSS absolut position der 1. Zeile & Spalte an Position 0,0 in der iframe-Seite würde das Ihr problem lösen?
InformationsquelleAutor der Antwort David Burrows
Wie wäre es mit einer Lösung, wo Sie die eigentlichen "Daten" der Tabelle in ein eigenes div mit
overflow: scroll;
? Dann wird der browser automatisch scrollbars für den Teil der "Tabelle" Sie wollen nicht zu sperren, und Sie können die "table header"/erste Zeile einfach über das<div>
.Nicht sicher, wie das funktionieren würde mit horizontalem scrollen aber.
InformationsquelleAutor der Antwort matt b
Ich rannte über eine Website, ein paar Wochen zurück. Dies ist ein Beispiel für die erste Spalte gesperrt, aber es ist nicht browser-kompatibel mit Firefox. Ich habe nicht viel zu überprüfen, um, aber es scheint, es funktioniert nur im IE. Es gibt einige Hinweise der Autorin zur Verfügung gestellt, zusammen mit, die du Lesen kannst.
Schloss die Erste Spalte:
http://home.tampabay.rr.com/bmerkey/examples/locked-column-csv.html
Lassen Sie mich wissen, wenn Sie benötigen Javascript um die Tabelle zu sperren Header zu.
InformationsquelleAutor der Antwort Ponchai
Können Sie es tun, ohne javascript
finden Sie unter diesem link:
http://yonax73.blogspot.com/2014/09/tabla-con-cabecera-estatica-cuerpo-con.html
oder live-demo:
http://jsfiddle.net/yonatanalexis22/aeeme8mt/7/
InformationsquelleAutor der Antwort Yonatan Alexis Quintero Rodrig