Wie implementiert man eine feste Kopfzeilentabelle mit horizontalen und vertikalen Bildlaufleisten?

Feste Kopfzeilentabelle mit aktivierter horizontaler und vertikaler Bildlaufleiste

Das Problem, mit dem Sie konfrontiert sind, tritt auf, wenn Sie Ihrer festen Tabelle eine vertikale Bildlaufleiste hinzufügen Header-Tabelle. Die vertikale Bildlaufleiste stört die Positionierung der horizontalen Bildlaufleiste, da beide im Konflikt um den Platz innerhalb des äußeren Containers stehen.

HTML- und CSS-Struktur

Ihr bereitgestelltes HTML und CSS Struktur ist ein guter Ausgangspunkt. Der HTML-Code besteht aus einer verschachtelten Tabellenstruktur, wobei die Header-Tabelle auf eine feste Positionierung und die Body-Tabelle auf overflow-y:scroll eingestellt ist. Das CSS definiert Stile für die Tabellenelemente, einschließlich fester Höhen und Breiten für die Kopfzellen und Körperzellen.

Lösung

Um das Problem zu lösen und sowohl horizontale als auch horizontale Elemente zu haben Damit vertikale Bildlaufleisten ordnungsgemäß funktionieren, können wir eine Kombination aus CSS und verwenden JavaScript:

1. CSS:

   • Überlauf entfernen-x: scroll; Eigenschaft aus dem .inner-container.
   • Fügen Sie dem .inner-Container eine Klasse mit einer bestimmten Breite hinzu, sagen Sie „Scroll-Container“.

2. JavaScript:

   • Verwenden Sie JavaScript, um die Breite des zu berechnen .scroll-container und legen Sie die Breite des .table-body auf diese Breite fest. Dadurch wird sichergestellt, dass die Haupttabelle die richtige Breite hat, um an der Kopfzeilentabelle ausgerichtet zu werden, und Probleme mit der horizontalen Bildlaufleiste vermieden werden.

Beispielcode

Hier ist ein Beispiel für die Aktualisierung Code:

/* CSS */
.scroll-container {
  width: 100%;
}

/* JavaScript */
var scrollContainer = document.querySelector(".scroll-container");
var tableBody = document.querySelector(".table-body");
tableBody.style.width = scrollContainer.offsetWidth + "px";

Erklärung

Indem wir die overflow-x-Eigenschaft aus dem .inner-container entfernen und über JavaScript eine bestimmte Breite festlegen, stellen wir dies sicher Der .table-body hat die richtige Breite, um sowohl horizontales als auch vertikales Scrollen zu ermöglichen. Diese Ausrichtung verhindert, dass die vertikale Bildlaufleiste die horizontale Bildlaufleiste beeinträchtigt, und sorgt dafür, dass beide ordnungsgemäß funktionieren.

Alternative Lösungen

Darüber hinaus gibt es noch andere Lösungen, die Sie in Betracht ziehen könnten:

• Verwenden Sie CSS Grid oder Flexbox für das Layout, um ein flexibleres und reaktionsfähigeres Layout zu erzielen Design.
• Erkunden Sie die Verwendung einer CSS-Bibliothek wie Bootstrap oder Materialise, die vorgefertigte Komponenten und Stile bereitstellt, die die Implementierung dieser Funktionalität vereinfachen können.

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