9.1 Scrollen
Tabellen werden häufig genutzt, um strukturierte Daten darzustellen, können aber auf Geräten mit kleinem Bildschirm schwierig zu handhaben sein. Responsive Tabellen verbessern das Verständnis und die Interaktion mit Daten auf verschiedenen Geräten, einschließlich Mobiltelefonen und Tablets. Schauen wir uns ein paar Techniken an, um responsive Tabellen zu erstellen.
Eine einfache Methode, um responsive Tabellen zu erstellen, ist das Hinzufügen eines horizontalen Scrollens. Diese Methode erhält die Struktur der Tabelle und erlaubt es den Nutzern, die Daten auf schmalen Bildschirmen horizontal zu scrollen.
Beispiel:
.table-container {
overflow-x: auto;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Tabelle mit Scrollen</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Spalte 1</th>
<th>Spalte 2</th>
<th>Spalte 3</th>
<th>Spalte 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Daten 1</td>
<td>Daten 2</td>
<td>Daten 3</td>
<td>Daten 4</td>
</tr>
<!-- Andere Zeilen -->
</tbody>
</table>
</div>
</body>
</html>
Codeerklärung:
.table-container: Fügt horizontales Scrollen hinzu, wenn die Tabelle die Breite des Containers überschreitettable: Setzt die Breite der Tabelle auf 100% und kombiniert die Zellengrenzen
9.2 Spaltenverstecken
Diese Methode versteckt weniger wichtige Spalten auf schmalen Bildschirmen, sodass die Hauptdaten sichtbar bleiben. Dies kann mit Media Queries erreicht werden.
Beispiel:
@media (max-width: 600px) {
.hide {
display: none;
}
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Tabelle mit Spaltenverstecken</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Spalte 1</th>
<th>Spalte 2</th>
<th class="hide">Spalte 3</th>
<th class="hide">Spalte 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Daten 1</td>
<td>Daten 2</td>
<td class="hide">Daten 3</td>
<td class="hide">Daten 4</td>
</tr>
<!-- Andere Zeilen -->
</tbody>
</table>
</body>
</html>
Codeerklärung:
.hide: Verbirgt bestimmte Spalten auf Bildschirmen mit weniger als 600px Breite mit Media Queriestable: Setzt die Breite der Tabelle auf 100% und kombiniert die Zellengrenzen
9.3. Stacking
Stacking verwandelt Tabellenzeilen in Blöcke, die auf schmalen Bildschirmen untereinander angezeigt werden. Dies macht die Tabelle auf mobilen Geräten besser lesbar.
Beispiel:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
td {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
td::before {
content: attr(data-label);
font-weight: bold;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Tabelle mit Stacking</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Spalte 1</th>
<th>Spalte 2</th>
<th>Spalte 3</th>
<th>Spalte 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Spalte 1">Daten 1</td>
<td data-label="Spalte 2">Daten 2</td>
<td data-label="Spalte 3">Daten 3</td>
<td data-label="Spalte 4">Daten 4</td>
</tr>
<!-- Andere Zeilen -->
</tbody>
</table>
</body>
</html>
Codeerklärung:
- Media Queries: Verwandeln die Tabelle in Blockelemente auf Bildschirmen mit weniger als 600px Breite
td::before: Fügt einen Pseudo-Element mit dem Spaltennamen vor jedem Zellwert hinzu, um den Datenkontext zu erhalten
9.4. Card Layout
Diese Methode verwandelt jede Tabellenzeile in eine eigene Karte auf schmalen Bildschirmen. Dies verbessert die Lesbarkeit der Daten auf mobilen Geräten.
Beispiel:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
tr {
margin-bottom: 10px;
border-bottom: 2px solid #ccc;
padding-bottom: 10px;
}
td {
display: flex;
justify-content: space-between;
padding: 10px 0;
border: none;
}
td::before {
content: attr(data-label);
font-weight: bold;
margin-right: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Tabelle mit Card Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Spalte 1</th>
<th>Spalte 2</th>
<th>Spalte 3</th>
<th>Spalte 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Spalte 1">Daten 1</td>
<td data-label="Spalte 2">Daten 2</td>
<td data-label="Spalte 3">Daten 3</td>
<td data-label="Spalte 4">Daten 4</td>
</tr>
<!-- Andere Zeilen -->
</tbody>
</table>
</body>
</html>
Codeerklärung:
- Media Queries: Verwandeln die Tabelle in Blockelemente und erstellen Karten auf Bildschirmen mit weniger als 600px Breite
td::before: Fügt einen Pseudo-Element mit dem Spaltennamen vor jedem Zellwert hinzu, um den Datenkontext zu erhalten
9.5 Nutzung von CSS Frameworks
Viele CSS-Frameworks, wie Bootstrap, bieten integrierte Lösungen für die Erstellung von responsiven Tabellen. Die Nutzung solcher Frameworks vereinfacht den Prozess und bietet fertige Stile und Komponenten.
Beispiel mit Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Tabelle mit Bootstrap</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-responsive">
<thead>
<tr>
<th>Spalte 1</th>
<th>Spalte 2</th>
<th>Spalte 3</th>
<th>Spalte 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Daten 1</td>
<td>Daten 2</td>
<td>Daten 3</td>
<td>Daten 4</td>
</tr>
<!-- Andere Zeilen -->
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Codeerklärung:
table.table-responsive: Bootstrap-Klasse, die horizontales Scrollen für Tabellen auf schmalen Bildschirmen hinzufügtcontainer: Bootstrap-Klasse zum Zentrieren und Festlegen der maximalen Breite des Containers
GO TO FULL VERSION