201107Sep

jQuery: Plugin für fixierte Kopfzeilen bei Tabellen

Bei der Arbeit mit HTML-Tabellen (table), die für die Darstellung von Datensätzen genutzt werden, kann es je nach Datenbestand oder Bedienkomfort erforderlich sein, dass der Tabellenkopf oder die Kopfzeile (thead) auch beim Scrollen an oberster Position bestehen bleibt. Eine "Fixierung" bedeutet in diesem Fall also die stetige Anzeige der Kopfzeile, wodurch die eigentlichen Tabellendaten immer im Kontext zu der definierenden Reihe betrachtet werden können.
Um dieser Problematik begegnen zu können, kann ein entsprechendes jQuery-Plugin verwendet werden: Das "jQuery Plugin for Fixed Header Tables" versieht eine semantisch korrekte Tabelle mit der besagten Funktionalität und bietet diesen Ansatz bei Bedarf auch für die Fußzeile (tfoot) an.

jQuery Plugin for Fixed Header Tables

Das Plugin kann also einfach auf eine bestehende Tabelle angewendet werden und bietet dabei verschiedene Optionen. So können auch gleich Klassen für alternierende Reihenfarben festgelegt werden:

  • $("#tabelle").fixedHeaderTable({
  • altClass: "className",
  • footer: true
  • });

Die Dokumentation findet sich auf der Website des Plugins. Alternativ kann eine fixierte Kopfzeile auch ohne Plugin mit jQuery und CSS3 umgesetzt werden. Hierzu eignet sich dieses Snippet von Filip Zembowicz, das eine einfache CSS-Transformation einsetzt.

RSS-Feed abonnieren