Wie können Tabellenüberschriften beim Scrollen des Hauptteils in HTML mithilfe von CSS und JavaScript fixiert bleiben?

Gibt es eine browserübergreifende CSS/JavaScript-Technik, um eine lange HTML-Tabelle so anzuzeigen, dass die Spaltenüberschriften auf dem Bildschirm fixiert bleiben und nicht mit dem Tabellenkörper scrollen?

In Microsoft Excel verwenden wir oft die Funktion „Fenster einfrieren“, um die Spaltenüberschriften stabil zu halten, während wir durch den Tabelleninhalt scrollen. Gibt es eine ähnliche browserübergreifende Technik in HTML?

Mithilfe von CSS-Transformationen kann dies mit nur vier Zeilen JavaScript-Code erfolgen:

1. Verpacken Sie Ihre Tabelle in einen Container mit dem ID „wrap“ und setzen Sie seine Überlaufeigenschaft auf „auto“.
2. Achten Sie auf das „scroll“-Ereignis auf der Container.
3. Berechnen Sie im Ereignishandler den Übersetzungswert basierend auf der scrollTop-Eigenschaft.
4. Wenden Sie den berechneten Übersetzungswert mithilfe der Transformationseigenschaft auf das thead-Element der Tabelle an.

Dieser Ansatz hat folgende Vorteile:

• Sauber und effizient, da nur vier Zeilen verwendet werden JavaScript.
• Keine externen JavaScript-Abhängigkeiten.
• Funktioniert mit allen Tabellenkonfigurationen, einschließlich festem Layout.
• Unterstützt moderne Browser, einschließlich Chrome, Safari, Firefox und Edge.

Hier ist der Code:

document.getElementById("wrap").addEventListener("scroll", function(){
   var translate = "translate(0,"+this.scrollTop+"px)";
   this.querySelector("thead").style.transform = translate;
});

Unten finden Sie ein vollständiges Beispiel für Referenz:

// JavaScript
document.getElementById("wrap").addEventListener("scroll",function(){
   var translate = "translate(0,"+this.scrollTop+"px)";
   this.querySelector("thead").style.transform = translate;
});

// CSS
#wrap {
    overflow: auto;
    height: 400px;
}

td {
    background-color: green;
    width: 200px;
    height: 100px;
}

// HTML
<div></div>

Das obige ist der detaillierte Inhalt vonWie können Tabellenüberschriften beim Scrollen des Hauptteils in HTML mithilfe von CSS und JavaScript fixiert bleiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!