wie man Header in einer scrollbaren HTML -Tabelle verankert

Integration beider Header mit fester Tabelle und scrollierbare Tabellenkörper können eine übliche Anforderung in Web -Anwendungen sein. . Eine effektive Lösung zu finden kann jedoch eine Herausforderung sein. Dieser Leitfaden untersucht die Lösung für dieses Problem und führt Sie durch die Implementierung.

Die Lösung

Um diese Funktionalität zu erreichen, können Sie eine Kombination von CSS und Javascript verwenden Techniken. Eine beliebte Lösung besteht darin, eine Technik zu verwenden, die als Double-Scrolling bekannt ist. Dies beinhaltet das Erstellen von zwei verschachtelten Tabellen: eine äußere Tabelle, die den festen Header und eine scrollbare innere Tabelle für den Tischkörper enthält. Für die Tabellen:

/ * äußere Tabelle (behobener Kopf) */ #OUTER-TIBLE { Breite: 100%; Höhe: 100px; / * Stellen Sie eine feste Höhe für den Header ein */ Überlauf: versteckt; } / * Innere Tabelle (scrollierbarer Körper) */ #Inner-table { Höhe: Calc (100% - 100px); / * Berechnen Sie die Höhe basierend auf der Höhe der äußeren Tabelle */ Überlauf-y: Scroll; }

/* Outer table (fixed header) */
#outer-table {
  width: 100%;
  height: 100px; /* Set a fixed height for the header */
  overflow: hidden;
}

/* Inner table (scrollable body) */
#inner-table {
  height: calc(100% - 100px); /* Calculate the height based on the outer table's height */
  overflow-y: scroll;
}

const oUtertable = document.getElementById ('Outer-Table '); const innertable = document.getElementById ('Inner-table'); // Berechnen Sie die Höhe der inneren Tabelle basierend auf der Höhe der äußeren Tabelle innertable.style.height = `$ {outtertable.clientHeight - 100} px`;

const outerTable = document.getElementById('outer-table');
const innerTable = document.getElementById('inner-table');

// Calculate the inner table's height based on the outer table's height
innerTable.style.height = `${outerTable.clientHeight - 100}px`;