Wie erstelle ich eine feste Kopfzeilentabelle mit horizontalen und vertikalen Bildlaufleisten?

Kopfzeilentabelle mit horizontaler Bildlaufleiste und vertikaler Bildlaufleiste behoben

Problem:

Erstellen einer Eine feste Kopfzeilentabelle mit horizontalen und vertikalen Bildlaufleisten kann eine Herausforderung sein, wenn beide Bildlaufleisten erforderlich sind. Das Problem tritt auf, wenn der äußere Container absolut positioniert ist, was dazu führen kann, dass die vertikale Bildlaufleiste mit der Kopfzeile kollidiert und verhindert, dass sie fixiert wird.

HTML:

Die HTML-Struktur ist relativ einfach:

<div class="outer-container">
  <div class="inner-container">
    <div class="table-header">...</div>
    <div class="table-body">...</div>
  </div>
</div>

CSS:

Die CSS-Stile positionieren den äußeren Container absolut und verarbeiten den überlaufenden Inhalt:

.outer-container {
  position: absolute;
  overflow: hidden;
}

.inner-container {
  overflow-x: scroll;
}

.table-header {
  position: absolute;
  width: 100%;
}

.table-body {
  overflow-y: scroll;
  height: calc(100% - 40px); /* Adjust this value to match the height of the header */
}

Lösung:

Der Schlüssel zur Behebung dieses Problems besteht darin, das Scrollen der Tabelle zu verwalten Header und Body synchron. Hier ist eine mögliche Lösung:

1. Setzen Sie die Position des .table-headers auf absolut. Dadurch bleibt es im .inner-container positioniert.
2. Fügen Sie einen Scroll-Ereignis-Listener zum .table-body hinzu.
3. Legen Sie im Event-Handler den linken Offset des .table-Containers fest. Header zum Negativ der horizontalen Bildlaufposition des .table-body. Dadurch wird der Header beim horizontalen Scrollen zusammen mit dem Text verschoben.

JavaScript/jQuery:

Das folgende Skript kann verwendet werden, um die Scroll-Synchronisierung zu implementieren :

$(".table-body").scroll(function() {
  $(".table-header").offset({ left: -this.scrollLeft });
});

Erklärung:

Dieses Skript stellt sicher, dass, wenn ein Benutzer den .table-body horizontal scrollt, der .table-header mitscrollt und dabei seine feste Position beibehält.

Hinweis:

Passen Sie die an height-Eigenschaft des .table-body im CSS, um sie an die Höhe des .table-header anzupassen. Dadurch wird verhindert, dass der Text in den Header überläuft.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine feste Kopfzeilentabelle mit horizontalen und vertikalen Bildlaufleisten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!