Ich versuche, eine HTML-Tabelle zu entwerfen, in der der Header oben auf der Seite bleibt, wenn UND NUR wenn der Benutzer ihn aus der Ansicht scrollt. Zum Beispiel kann die Tabelle 500 Pixel von der Seite entfernt sein. Wie kann ich sie so gestalten, dass sie, wenn der Benutzer den Header aus der Ansicht scrollt (der Browser erkennt, dass er nicht mehr in der Windows-Ansicht angezeigt wird), oben bleibt ? Kann mir jemand eine Javascript-Lösung dafür geben?
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
Im obigen Beispiel möchte ich, dass <thead>
die Seite mit der Seite gescrollt wird, wenn sie nicht mehr angezeigt wird.
WICHTIG: Ich suche NICHT nach einer Lösung, bei der <tbody>
eine Bildlaufleiste angezeigt wird (Überlauf: Auto).
jquery
html
html-table
Sam Dufel
quelle
quelle
Antworten:
Sie würden so etwas tun, indem Sie auf den
scroll
Ereignishandler tippenwindow
und einen anderentable
mit einer festen Position verwenden, um die Kopfzeile oben auf der Seite anzuzeigen.HTML:
CSS:
JavaScript:
Dies zeigt den Tabellenkopf an, wenn der Benutzer weit genug nach unten scrollt, um den ursprünglichen Tabellenkopf auszublenden. Es wird wieder ausgeblendet, wenn der Benutzer die Seite wieder weit genug nach oben gescrollt hat.
Arbeitsbeispiel: http://jsfiddle.net/andrewwhitaker/fj8wM/
quelle
window
. mkoryak.github.io/floatThead bietet eine allgemeinere Lösung.Nun, ich habe versucht, den gleichen Effekt zu erzielen, ohne auf Spalten mit fester Größe zurückzugreifen oder eine feste Höhe für den gesamten Tisch zu haben.
Die Lösung, die ich gefunden habe, ist ein Hack. Es besteht darin, die gesamte Tabelle zu duplizieren, dann alles außer dem Header auszublenden und dafür zu sorgen, dass diese eine feste Position hat.
HTML
CSS
Javascript
Siehe hier: http://jsfiddle.net/QHQGF/7/
Bearbeiten: Der Code wurde aktualisiert, sodass der Kopf Zeigerereignisse empfangen kann (sodass Schaltflächen und Links in der Kopfzeile weiterhin funktionieren). Dies behebt das von luhfluh und Joe M. gemeldete Problem.
Neue jsfiddle hier: http://jsfiddle.net/cjKEx/
quelle
visibility: hidden
. Sie können nur verstecken#clone tbody
und danach können Sie Grenze setzen ... Working fiddle: jsfiddle.net/QHQGF/1707Reines CSS (ohne IE11-Unterstützung):
quelle
-webkit-sticky
als ungültiger Wert für angezeigtposition
.-webkit-sticky
ist für Safari (Desktop & iOS), nicht für Chrome.position: sticky
funktioniert in Chrome ab Version 56. Sie sollten BEIDE Regeln festlegen:-webkit-sticky
und zwarsticky
genau in derselben Reihenfolge wie in meinem Codebeispiel. Safari bekommtwebkit-sticky
und alle anderen Browser überschreiben es mitsticky
.position: sticky
es nicht mit Tabellenelementen funktionieren.Ich habe ein Plugin geschrieben, das dies tut. Ich arbeite jetzt seit ungefähr einem Jahr daran und ich denke, es behandelt alle Eckfälle ziemlich gut:
Hier sind einige Demos / Dokumente:
http://mkoryak.github.io/floatThead/
quelle
Ich konnte das Problem mit dem Ändern der Spaltenbreite beheben. Ich begann mit Andrews obiger Lösung (vielen Dank!) Und fügte dann eine kleine Schleife hinzu, um die Breite der geklonten td's festzulegen:
Dies löst das Problem, ohne den gesamten Tisch klonen und den Körper verstecken zu müssen. Ich bin brandneu in JavaScript und jQuery (und im Stapelüberlauf), daher sind Kommentare willkommen.
quelle
Dies ist bei weitem die beste Lösung, die ich für einen festen Tabellenkopf gefunden habe.
UPDATE 5/11: Fehler beim horizontalen Scrollen behoben, wie von Kerry Johnson hervorgehoben
Codepen: https://codepen.io/josephting/pen/demELL
quelle
outerWidth
zuwidth
in der Funktionsdefinition resizeFixed ().z-index
positiven Zahl in der.fixed
Klasse auch eine CSS-Eigenschaft hinzufügen , damit Objekte, die nach dem Laden in die Tabelle gerendert wurden, beim Scrollen nicht über dem festen Header schweben.Die beste Lösung ist die Verwendung dieses JQuery-Plugins:
https://github.com/jmosbech/StickyTableHeaders
Dieses Plugin hat bei uns sehr gut funktioniert und wir haben viele andere Lösungen ausprobiert. Wir haben es in IE, Chrome und Firefox getestet
quelle
Hier gibt es schon viele wirklich gute Lösungen. Eine der einfachsten CSS-Lösungen, die ich in diesen Situationen verwende, lautet jedoch wie folgt:
Da kein JavaScript erforderlich ist, wird die Situation erheblich vereinfacht. Sie müssen sich im Wesentlichen auf die zweite CSS-Regel konzentrieren, die die Bedingungen enthält, um sicherzustellen, dass der Kopf der Tabelle unabhängig vom Bildlaufbereich oben bleibt.
Ausarbeitung der einzelnen Regeln im Detail.
position
soll dem Browser anzeigen, dass das Kopfobjekt, seine Zeile und seine Zellen alle oben bleiben müssen. Dies muss unbedingt begleitet seintop
, was dem Browser angibt, dass der Kopf am oberen Rand der Seite oder des Ansichtsfensters haften bleibt. Darüber hinaus können Sie hinzufügen,z-index
um sicherzustellen, dass der Inhalt des Kopfes immer oben bleibt.Die Hintergrundfarbe dient lediglich zur Veranschaulichung des Punktes. Sie müssen kein zusätzliches JavaScript verwenden, um diesen Effekt zu erzielen. Dies wird in den meisten gängigen Browsern nach 2016 unterstützt.
quelle
Ich habe eine einfache jQuery-Bibliothek namens Sticky Table Headers gefunden. Zwei Codezeilen und es hat genau das getan, was ich wollte. Die obigen Lösungen verwalten die Spaltenbreiten nicht. Wenn Sie also Tabellenzellen haben, die viel Platz beanspruchen, stimmt die resultierende Größe des persistenten Headers nicht mit der Breite Ihrer Tabelle überein.
http://plugins.jquery.com/StickyTableHeaders/
Nutzungsinformationen hier: https://github.com/jmosbech/StickyTableHeaders
quelle
Nachdem ich alle verfügbaren Lösungen überprüft hatte, schrieb ich ein Plugin, das jede Zeile (nicht nur die) oben auf der Seite oder im Container einfrieren kann. Es ist sehr einfach und sehr schnell. Fühlen Sie sich frei, es zu benutzen. http://maslianok.github.io/stickyRows/
quelle
Sie können diesen Ansatz verwenden, reines HTML und CSS, kein JS erforderlich :)
quelle
Ich habe eine einfache Lösung gefunden, ohne JQuery und nur CSS zu verwenden .
Sie müssen den festen Inhalt in 'th'-Tags einfügen und das CSS hinzufügen
Die Eigenschaften position, z-index und top sind ausreichend. Sie können den Rest jedoch anwenden, um eine bessere Übersicht zu erhalten.
quelle
Ich hatte auch die gleichen Probleme mit der Randformatierung, die nicht mit Entrophys Code angezeigt wurde, sondern mit ein paar kleinen Korrekturen. Jetzt ist die Tabelle erweiterbar und zeigt alle CSS-Stilregeln an, die Sie hinzufügen können.
zu css hinzufügen:
dann ist hier das neue Javascript:
quelle
Hier ist eine Lösung, die auf der akzeptierten Antwort aufbaut. Es korrigiert: Spaltenbreiten, übereinstimmenden Tabellenstil und wenn die Tabelle in einem Container-Div gescrollt wird.
Verwendung
Stellen Sie sicher, dass Ihre Tabelle ein
<thead>
Tag hat, da nur der Inhalt des Kopfes repariert wird.JavaSript
quelle
$sp.scrollLeft()
wodurch der Betrag von links gescrollt wird, sodass beim Scrollen nach unten die feste Tabelle korrekt positioniert ist. Außerdem wurde beim horizontalen Scrollen überprüft, ob eine feste Tabelle sichtbar ist, um die linke Position anzupassen. Ein weiteres Problem, das ich nicht lösen konnte, ist, dass die feste Tabelle ausgeblendet wird, wenn die Tabelle über dem Ansichtsfenster liegt, bis der Benutzer einen Bildlauf nach oben durchführt.Uncaught TypeError: $table.scrollParent is not a function
Dies hilft Ihnen dabei, einen festen Header zu haben, der auch horizontal mit Daten gescrollt werden kann.
quelle
Das ist meine Lösung
quelle
Ein bisschen spät zur Party, aber hier ist eine Implementierung, die mit mehreren Tabellen auf derselben Seite funktioniert und frei "ruckelt" (mit requestAnimationFrame). Es ist auch nicht erforderlich, eine Breite für die Spalten anzugeben. Das horizontale Scrollen funktioniert ebenfalls.
Die Überschriften sind in a definiert,
div
sodass Sie dort bei Bedarf Markups (wie Schaltflächen) hinzufügen können. Dies ist der gesamte HTML-Code, der benötigt wird:https://jsfiddle.net/lloydleo/bk5pt5gs/
quelle
In dieser Lösung wird ein fester Header dynamisch erstellt, der Inhalt und der Stil werden aus THEAD geklont
Alles was Sie brauchen sind zwei Zeilen zum Beispiel:
var $myfixedHeader = $("#Ttodo").FixedHeader(); //create fixed header $(window).scroll($myfixedHeader.moveScroll); //bind function to scroll event
Mein jquery Plugin FixedHeader und getStyleObject unten können Sie in die Datei .js einfügen
quelle
Erstellen Sie eine zusätzliche Tabelle mit demselben Header wie die Haupttabelle. Legen Sie einfach den Kopf in die neue Tabelle mit einer Zeile und allen Überschriften. Positionieren Sie absolut und Hintergrund weiß. Für die Haupttabelle setzen Sie es in ein div und verwenden Sie eine gewisse Höhe und Überlauf-y-Schriftrolle. Auf diese Weise wird unsere neue Tabelle den Header der Haupttabelle überwinden und dort bleiben. Umgib alles in einem div. Unten finden Sie den groben Code dafür.
quelle
Demo: CSS- Demo mit festem Tabellenkopf
quelle
Beheben Sie Ihr Problem damit
quelle
Dies kann mithilfe der Stileigenschaftstransformation erreicht werden. Alles, was Sie tun müssen, ist, Ihre Tabelle in ein Div zu wickeln, dessen feste Höhe und Überlauf auf Auto eingestellt sind, zum Beispiel:
Und dann können Sie einen Onscroll-Handler anhängen. Hier haben Sie eine Methode, mit der jede Tabelle gefunden wird, die mit Folgendem verpackt ist
<div class="tableWrapper"></div>
:Und hier ist ein funktionierendes Beispiel dafür in Aktion (ich habe Bootstrap verwendet, um es schöner zu machen): Geige
Für diejenigen, die auch IE und Edge unterstützen möchten, ist hier der Ausschnitt:
In IE und Edge ist das Scrollen etwas verzögert ... aber es funktioniert
Hier ist eine Antwort, die mir hilft, dies herauszufinden: Antwort
quelle
Ich habe die meisten dieser Lösungen ausprobiert und schließlich (IMO) die beste, moderne Lösung gefunden:
CSS-Raster
Mit CSS-Grids können Sie ein 'Grid' definieren und schließlich eine schöne, javascriptfreie, browserübergreifende Lösung für eine Tabelle mit festem Header und scrollbarem Inhalt erstellen. Die Headerhöhe kann sogar dynamisch sein.
CSS : Als Raster anzeigen und die Anzahl festlegen
template-rows
:HTML : Erstellen Sie einen Rastercontainer und die Anzahl der definierten
rows
:Hier ist ein Arbeitsbeispiel:
CSS
HTML
quelle
Ich habe es mit Transformation versucht : übersetzen . Während es in Firefox und Chrome gut funktioniert, gibt es in IE11 einfach keine Funktion. Keine doppelten Bildlaufleisten. Unterstützt Tischfuß und Bildunterschrift. Reines Javascript, keine jQuery.
http://jsfiddle.net/wbLqzrfb/42/
quelle
Ich habe eine Lösung ohne Abfrage gefunden
HTML
CSS
Sie können es hier sehen: https://jsfiddle.net/lexsoul/fqbsty3h
Quelle: https://medium.com/@vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc
quelle