Wie erstelle ich eine scrollbare HTML-Tabelle mit festen Kopfzeilen?

So verankern Sie Kopfzeilen in einer scrollbaren HTML-Tabelle

Die Einbindung sowohl fester Tabellenköpfe als auch scrollbarer Tabellenkörper kann eine häufige Anforderung in Webanwendungen sein . Allerdings kann es eine Herausforderung sein, eine wirksame Lösung zu finden. 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 aus CSS und JavaScript verwenden Techniken. Eine beliebte Lösung ist die Verwendung einer Technik namens Double-Scrolling. Dazu müssen zwei verschachtelte Tabellen erstellt werden: eine äußere Tabelle, die den festen Header enthält, und eine scrollbare innere Tabelle für den Tabellenkörper.

CSS-Setup

Definieren Sie zunächst den CSS-Stil für die Tabellen:

/* 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;
}

JavaScript-Setup

Als nächstes Verwenden Sie JavaScript, um die Höhe der inneren Tabelle dynamisch anzupassen:

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`;

Beispiel

Ein funktionierendes Beispiel finden Sie im folgenden Codebeispiel:

<table>

Diese Lösung friert effektiv den Tabellenkopf ein, während der Tabellenkörper reibungslos scrollen kann. Durch die Implementierung dieser Techniken können Sie reaktionsfähige und interaktive Tabellen erstellen, die Ihren spezifischen Anforderungen entsprechen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine scrollbare HTML-Tabelle mit festen Kopfzeilen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!