Erstellen einer scrollbaren Tabelle mit einem Sticky-Header und einer eingefrorenen Spalte mithilfe von HTML und CSS

Tabellen sind in Webanwendungen von grundlegender Bedeutung für die Anzeige strukturierter Daten. Das Hinzufügen von Funktionen wie einer scrollbaren Kopfzeile und eingefrorenen (klebrigen) Spalten kann Tabellen noch benutzerfreundlicher machen. In diesem Artikel erfahren Sie, wie Sie mit reinem HTML und CSS eine Tabelle mit einer festen Kopfzeile und einer eingefrorenen linken Spalte erstellen.

CodePen-Beispiel

Um den Code in Aktion zu sehen, schauen Sie sich dieses Live-Beispiel auf CodePen an:
Dieses Codebeispiel verwendet die JS-Klasse, um eine Tabelle zu erstellen. Sie können dies mit jedem Framework oder jeder Bibliothek Ihrer Wahl replizieren.

Hauptmerkmale des Tisches

• Sticky Header: Der Header der Tabelle bleibt beim vertikalen Scrollen oben sichtbar.
• Eingefrorene linke Spalte: Die erste Spalte bleibt fixiert, während Sie horizontal scrollen.
• Scrollbarer Inhalt: Sowohl vertikales als auch horizontales Scrollen werden unterstützt.
• Anpassbare Stile: Das Tischdesign ist klar und modern, mit Zebrastreifen und Schwebeeffekten.

HTML-Struktur

Wir verwenden eine einfache Tabellenstruktur mit einem für den Header und ein für die Reihen. Die Tabelle ist zur Scrollbarkeit in ein Div eingeschlossen. Hier ist der Code:

<div>



<h2>
  
  
  CSS for Sticky Header and Frozen Column
</h2>

<p>Here’s the CSS that makes the magic happen:<br>
</p>

<pre class="brush:php;toolbar:false">/* General styles */
body {
  font-family: Arial, sans-serif;
}

/* Scrollable container */
.table-container {
  border: 1px solid #e5e7eb;
  border-bottom: none;
  overflow: auto; /* Enables both horizontal and vertical scrolling */
  height: 400px; /* Limits table height for vertical scrolling */
}

/* Table layout */
.table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed; /* Ensures consistent column widths */
}

/* Table cells and headers */
.table th,
.table td {
  padding: 8px;
  text-align: center;
  border: 1px solid #e5e7eb;
}

/* Frozen first column */
.table td:nth-child(1),
.table th:nth-child(1) {
  background: red; /* Highlighted background for frozen column */
  position: sticky;
  left: 0; /* Ensures the column stays on the left */
  z-index: 5; /* Keeps the column above other cells */
  color: white;
}

/* Add higher z-index for header */
.table th:nth-child(1) {
  z-index: 6;
}

/* Sticky header */
.table th {
  background-color: #1e3a8a;
  color: white;
  font-size: 14px;
  font-weight: bold;
  position: sticky;
  top: 0; /* Makes the header stick to the top */
  z-index: 2; /* Keeps the header above the table body */
}

/* Styling for table body */
.table td {
  font-size: 14px;
  color: #6b7280;
}

/* Zebra striping for rows */
.table tr:nth-child(odd) {
  background-color: #f9fafb;
}

/* Hover effect for rows */
.table tr:hover {
  background-color: rgba(14, 116, 144, 0.1);
}

/* No data row styling */
.no-data {
  text-align: center;
  font-size: 14px;
  color: #9ca3af;
}

Erklären des CSS

Scrollbarer Container:

Die .table-container-Klasse fügt overflow: auto hinzu, um sowohl horizontales als auch vertikales Scrollen zu ermöglichen. Die Eigenschaft height: 400px begrenzt die Höhe der Tabelle und gewährleistet so vertikales Scrollen für größere Datensätze.

Sticky-Header:

Die Eigenschaften position: sticky und top: 0 werden auf Elemente angewendet, um sicherzustellen, dass die Kopfzeile beim vertikalen Scrollen sichtbar bleibt.
z-index: 2 stellt sicher, dass die Kopfzeile über dem Tabellenkörper angezeigt wird.

Eingefrorene linke Spalte:

Die erste Spalte wird mit nth-child(1)-Selektoren für gestaltet. und .
Die Eigenschaften position: sticky und left: 0 stellen sicher, dass die Spalte beim horizontalen Scrollen an Ort und Stelle bleibt.
Die Z-Index-Werte unterscheiden die Zelle (5) und die Kopfzeile (6) der Spalte, um eine ordnungsgemäße Schichtung sicherzustellen.

Hervorheben der eingefrorenen Spalte:

Die Hintergrundfarbe für die eingefrorene Spalte ist auf Rot eingestellt, mit weißem Text zur besseren Sichtbarkeit. Sie können dies an Ihre Designvorlieben anpassen.

Wie es zusammenarbeitet

Wenn Sie vertikal scrollen, bleibt der Position: Sticky-Header oben im .table-Container.
Beim horizontalen Scrollen bleibt die Spalte ganz links fixiert, wodurch der Effekt einer eingefrorenen Spalte entsteht.
Die Kombination aus overflow: auto und position: sticky sorgt dafür, dass der Tisch über beide Achsen funktionsfähig und benutzerfreundlich bleibt.

Verbesserungen, die Sie hinzufügen können

Responsive Anpassungen:
Verwenden Sie Medienabfragen, um die Spaltenbreiten und das Tabellenlayout für kleinere Bildschirme anzupassen.

Dynamisches Laden von Inhalten:

Verwenden Sie JavaScript, um Zeilen für größere Datensätze dynamisch abzurufen und zu füllen.

Interaktive Funktionen:

Zeilenklickereignisse, Filterung oder Sortierung mithilfe von JavaScript hinzufügen, um die Funktionalität zu verbessern.

Letzte Gedanken

Mit der Standard- Element und ein paar Zeilen CSS haben wir eine leistungsstarke, reaktionsfähige Tabelle mit einem Sticky-Header und einer eingefrorenen linken Spalte erstellt. Dieser Ansatz ist leichtgewichtig, einfach zu implementieren und funktioniert nahtlos in allen modernen Browsern.

Ganz gleich, ob Sie Dashboards erstellen, Berichte anzeigen oder große Datensätze verarbeiten, diese Methode sorgt für ein klares und professionelles Design, das außerdem benutzerfreundlich ist. Probieren Sie es aus und lassen Sie mich wissen, wie es für Ihr Projekt funktioniert! ?

Das obige ist der detaillierte Inhalt vonErstellen einer scrollbaren Tabelle mit einem Sticky-Header und einer eingefrorenen Spalte mithilfe von HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!