Wie erstelle ich eine feste Header-Tabelle innerhalb eines scrollbaren Div?

So erstellen Sie eine Tabelle mit festen Kopfzeilen innerhalb eines scrollbaren Div

Eine häufige Herausforderung bei der Webentwicklung besteht darin, eine Tabelle mit einer festen Kopfzeile zu erstellen, die auch dann sichtbar bleibt, wenn Benutzer vertikal scrollen durch den Körper des Tisches. In diesem Artikel untersuchen wir eine Lösung für dieses Problem mithilfe von zwei Ansätzen: einer benutzerdefinierten CSS-Lösung und einer JavaScript-basierten Lösung.

Benutzerdefinierte CSS-Lösung

Die Eine benutzerdefinierte CSS-Lösung basiert auf der absoluten Positionierung des Tabellenkopfes und der Beibehaltung seiner Position auch beim Scrollen des Tabellenkörpers. Das folgende CSS kann verwendet werden:

#table-wrapper {
  position: relative;
}

#table-scroll {
  height: 250px;
  overflow: auto;
  margin-top: 20px;
}

#table-wrapper table {
  width: 100%;
}

#table-wrapper table thead th {
  position: absolute;
  top: 0;
  z-index: 2;
  height: 20px;
  width: 35%;
  border: 1px solid red;
}

Diese Methode positioniert den Header einfach über dem Tabellenkörper und behält seine oberste Position beim Scrollen bei.

JavaScript-Lösung

Ein alternativer Ansatz nutzt JavaScript, um den Header zu korrigieren und das Scrollverhalten zu verwalten. Der folgende Codeausschnitt veranschaulicht diesen Ansatz:

// Get the table and its header
var table = document.getElementById("table");
var header = table.querySelector("thead");

// Clone the header
var cloneHeader = header.cloneNode(true);

// Create a wrapper div for the cloned header
var headerWrapper = document.createElement("div");
headerWrapper.classList.add("header-wrapper");

// Insert the cloned header into the wrapper
headerWrapper.appendChild(cloneHeader);

// Insert the header wrapper into the table
table.insertBefore(headerWrapper, table.firstChild);

// Add event listener for scrolling
table.addEventListener("scroll", function() {
  headerWrapper.style.left = table.scrollLeft + "px";
});

Diese JavaScript-Methode dupliziert die Kopfzeile, positioniert sie fest oben in der Tabelle und aktualisiert ihre linke Position, während die Tabelle scrollt, um die Ausrichtung am Tabellenkörper beizubehalten .

Beide Lösungen lösen effektiv das Problem der Erstellung einer festen Header-Tabelle innerhalb eines scrollbaren Div. Die Wahl des Ansatzes hängt von den spezifischen Anforderungen und Vorlieben des Webprojekts ab.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine feste Header-Tabelle innerhalb eines scrollbaren Div?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!