HTML: Tabellenkopfzeile (thead) fixieren
Autor: Ralf v.d.Mark
eingetragen: Dienstag, 26. März 2024 um 15:54 Uhr (13/2024 Kalenderwoche)
geändert: Dienstag, 26. März 2024 um 16:08 Uhr (13/2024 Kalenderwoche)
Keywords: thead tbody Tabellenkopfzeile fixieren anpinnen
Kategorien: HTML, JavaScript,
Text:
Tabellenkopfzeile (thead) fixieren
Die benötigte JavaScript-Datei kann hier herunterladen: https://www.ws-unternehmensberatung.de/downloads/tableHeader.js oder auch hier https://abs-ralf.vondy.de/js/tabelleScrollbar.js
Die HTML-Tabelle muss über das ID-Attribut die ID "Tabelle", "Tabelle1" oder "Tabelle2" bekommen. Also id="Tabelle", dann wird sie automatisch erkannt.
Die Anleitung finden Sie im Bereich Quellcode (unten)!
Quelle: ws-unternehmensberatung.de
Quellcode:
Die JS-Datei einbinden:
<script src="./tableHeader.js"></script>
Die HTML-Tabelle muss über das ID-Attribut die ID "Tabelle",
"Tabelle1" oder "Tabelle2" bekommen.
Dann wird sie automatisch erkannt. Beispiel:
<table id="Tabelle">
Alternativ kann man eine bestehende Tabellen-ID hiermit bekanntgeben:
<script>
window.addEventListener('load', function() {
var th = new TableHeader('MeineTabelle');
});
</script>
Zellen, die an der linken Seite fixiert werden sollen, benötigen die Klasse "fts".
Beispiel:
<th class="fts">Text</th>
Und für die Druckausgabe benötigen Sie noch eine Klasse "noprint",
mit der diese fixierten Objekte im Ausdruck ausgeblendet werden:
<style>
@media print {
.noprint {
display: none;
}
}
</style>
Anhänge: 1 Dateien