Tutorial zur Erstellung einer responsiven scrollbaren Tabelle

In der Webentwicklung ist die Darstellung von Tabellendaten eine häufige Anforderung. Manchmal können jedoch Tabellen so breit sein, dass sie den sichtbaren Bereich des Bildschirms überschreiten. In solchen Fällen ist es wichtig, eine Lösung zu finden, um den gesamten Tabelleninhalt darzustellen, ohne dass Informationen abgeschnitten werden. Eine scrollbare Tabelle ist die Lösung für ein responsives Webdesign! In diesem Blogpost werde ich dir zeigen, wie du eine scrollbare Tabelle in deine Webseite einfügst und warum sie so praktisch ist.

In diesem kleinen Tutorial möchte ich dir zeigen, wie du eine responsiv scrollbare Tabelle mit HTML und CSS erstellen kannst. Oftmals haben Tabellen einen umfangreichen Inhalt, der breiter ist als der sichtbare Bereich des Bildschirms. Eine scrollbare Tabelle ermöglicht es uns, den gesamten Inhalt anzuzeigen, ohne dass Informationen abgeschnitten werden. Das ist besonders praktisch, wenn du viele Spalten oder lange Texte in deiner Tabelle hast. Lass uns direkt loslegen!

CSS-Code für die scrollbare Tabelle

.table-wrapper {
overflow-x: scroll;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 8px;
text-align: left;
}

th {
background-color: #eee;
}

td {
border-bottom: 1px solid #ddd;
}

tr:nth-child(even) td {
background-color: #f2f2f2;
}

Der CSS-Code definiert das Erscheinungsbild der Tabelle und ihrer Elemente. Hier ist eine Beschreibung der einzelnen CSS-Regeln:

.table-wrapper: Dieser Selektor definiert die Klasse für den Container, der die Tabelle umschließt. Die Eigenschaft overflow-x: scroll; sorgt dafür, dass eine horizontale Scrollleiste angezeigt wird, wenn der Inhalt der Tabelle breiter als der sichtbare Bereich ist. Dies ermöglicht es, den gesamten Tabelleninhalt horizontal zu durchscrollen.

table: Dieser Selektor definiert das table-Element. Die Eigenschaft width: 100%; sorgt dafür, dass die Tabelle die volle Breite des Containers einnimmt. Die Eigenschaft border-collapse: collapse; gibt an, dass die Trennlinien zwischen den Tabellenzellen zusammengeführt werden sollen, um eine konsistente Darstellung zu erzielen.

th, td: Diese Selektoren definieren die Tabellenkopfzellen (th) und Tabellenzellen (td). Die Eigenschaften padding: 8px; und text-align: left; geben den Zellen einen Innenabstand von 8 Pixeln und stellen den Text linksbündig dar.

th: Dieser Selektor definiert die Tabellenkopfzellen. Die Eigenschaft background-color: #eee; setzt die Hintergrundfarbe der Tabellenkopfzellen auf ein helles Grau (#eee).

td: Dieser Selektor definiert die Tabellenzellen im Tabellenkörper. Die Eigenschaft border-bottom: 1px solid #ddd; fügt den Tabellenzellen eine untere Trennlinie hinzu, um die Zeilen voneinander abzugrenzen. Die Linie hat eine Dicke von 1 Pixel und eine Farbe von Hellgrau (#ddd).

tr:nth-child(even) td: Dieser Selektor definiert die Tabellenzellen in geraden Tabellenzeilen. Die Eigenschaft background-color: #f2f2f2; setzt die Hintergrundfarbe der Zellen auf ein blasses Grau (#f2f2f2), um eine abwechselnde Farbgestaltung für die Zeilen zu erreichen.

Diese CSS-Regeln tragen dazu bei, dass die Tabelle übersichtlich und ansprechend aussieht. Die Hintergrundfarben, Abstände und Trennlinien sorgen für eine klare Darstellung der Tabellenelemente. Die scrollbare Funktionalität ermöglicht es, den gesamten Tabelleninhalt anzuzeigen, auch wenn er breiter als der sichtbare Bereich ist.

HTML Code für die scrollbare Tabelle

Der HTML-Code enthält eine scrollbare Tabelle, die den CSS-Regeln entsprechend gestaltet ist. Hier ist der HTML-Code zu den CSS-Regeln der scrollbaren Tabelle für ein responsives Webdesign:

Der div-Container mit der Klasse „table-wrapper“ umschließt die Tabelle und ermöglicht die horizontale Scrollbar, wenn der Inhalt breiter als der sichtbare Bereich ist.

Die Tabelle selbst wird mit dem table-Element erstellt. Die Tabellenüberschrift (thead) enthält eine Zeile (tr), in der die Spaltenüberschriften (th) definiert sind. In diesem Beispiel sind dies die Namen der Datenfelder.

Der Tabellenkörper (tbody) enthält die eigentlichen Datenzeilen. Jede Zeile wird mit dem tr-Element definiert, und die einzelnen Zellen werden mit dem td-Element erstellt. Hier werden die Daten für jeden Eintrag in den entsprechenden Zellen eingefügt.

In diesem Beispiel werden zwei Datenzeilen erstellt, um den Inhalt der Tabelle zu demonstrieren. Du kannst weitere Zeilen hinzufügen, indem du den tr-Block mit den entsprechenden Daten duplizierst oder die Daten mit deinen eigenen Werten aktualisierst.

Die Kombination aus dem CSS-Code und dem HTML-Code ermöglicht es, eine scrollbare Tabelle zu erstellen, die den gesamten Tabelleninhalt darstellt, auch wenn er breiter als der sichtbare Bereich ist. Du kannst diesen Code verwenden und anpassen, um eine scrollbare Tabelle in deine eigene Webseite einzufügen.

Einfache Lösung für breite Tabellen: Scrollbare Tabellen

Eine scrollbare Tabelle ist eine praktische Lösung für die Darstellung umfangreicher Tabellendaten in der Webentwicklung. Sie ermöglicht es, den gesamten Tabelleninhalt anzuzeigen, ohne dass Informationen abgeschnitten werden. Durch die Verwendung des bereitgestellten CSS-Codes und des HTML-Codes kannst du einfach eine scrollbare Tabelle in deine Webseite einfügen und sie an deine Bedürfnisse anpassen. Mit dieser Methode kannst du problemlos Tabellen erstellen, die auch bei breitem Inhalt gut lesbar und zugänglich sind. Du kannst die Tabelle mit weiteren Datenzeilen erweitern oder die vorhandenen Daten durch deine eigenen Informationen ersetzen. Wenn du mehr über die Erstellung von scrollbaren Tabellen oder andere Aspekte der Webentwicklung erfahren möchtest, stehe ich dir gerne zur Verfügung.

Hast du bereits Erfahrungen mit der Erstellung scrollbarer Tabellen? Teile uns deine Gedanken, Tipps oder Fragen in den Kommentaren mit! Wir freuen uns darauf, von deinen Erfahrungen zu hören und dir bei möglichen Fragen weiterzuhelfen.