Mobile Tabellenanpassung: Von Spalten zu Stapeln

Tarif-Spalten sind auf dem Handy unlesbar. Wir zeigen dir, wie du responsive Tabellen baust, die auf allen Geräten funktionieren.

10 Min Fortgeschrittene März 2026

Smartphone in Hand zeigt responsive Preistabelle mit vertikal gestapelten Spalten für mobile Ansicht

Das Problem mit Desktop-Tabellen auf mobilen Geräten

Eine schöne Preistabelle mit fünf Spalten sieht am Desktop beeindruckend aus. Aber auf dem Smartphone? Das ist ein Desaster. Der Text wird mikroskopisch klein, Spalten überlappen sich, und deine Nutzer geben frustriert auf.

Das Problem ist nicht die Tabelle selbst — es ist die Annahme, dass Desktop-Layouts überall funktionieren. Die Lösung heißt responsive Design. Du brauchst nicht mehrere Versionen deiner Seite. Du brauchst eine intelligente Tabelle, die sich an ihr Umfeld anpasst.

Der Schlüssel: Auf Mobilgeräten wechseln Spalten zu Stapeln. Deine Preise werden vertikal angeordnet statt horizontal nebeneinander. Das funktioniert, ist lesbar und sieht noch immer gut aus.

Desktop-Ansicht einer Preistabelle mit fünf nebeneinander angeordneten Spalten zeigt die Probleme bei Skalierung

Wie die Umwandlung funktioniert

Es geht nicht darum, die Tabelle bei 768px einfach zu verstecken. Das wäre faul. Stattdessen nutzen wir CSS-Techniken, um die Struktur komplett neu anzuordnen.

Bei Desktop haben wir eine echte Tabelle mit `

`, ` ` und ` `. Aber wir können mit CSS auch andere HTML-Strukturen wie `

`-basierte Layouts verwenden, die sich noch besser kontrollieren lassen. Das Geheimnis liegt in Flexbox und Media Queries.

Desktop: Flex-Richtung ist `row` — Spalten nebeneinander
Mobile: Flex-Richtung wechselt zu `column` — Spalten übereinander
Jede Spalte wird zur vollständigen Karte mit allen Informationen

Schematische Darstellung zeigt Transformation einer horizontalen Tabelle zu vertikalem Stapel mit Pfeilen und Layoutänderungen

Schritt für Schritt: Die technische Umsetzung

HTML-Struktur mit Flexbox-Container

Statt einer echten Tabelle nutzt du einen äußeren Container mit der Klasse `.pricing-grid`. Jede Spalte ist ein eigenes `

` mit der Klasse `.pricing-card`. Das ist flexibler und ermöglicht besseres Styling auf mobilen Geräten.

Desktop-CSS mit flex-direction: row

Am Desktop setzt du `display: flex;` auf den Container und `flex-direction: row;`. Das setzt alle Karten nebeneinander. Jede Karte erhält eine feste oder flexible Breite — etwa 20% für fünf Spalten oder `flex: 1;` für gleichmäßige Verteilung.

Mobile-CSS mit Media Query

In einer Media Query für Bildschirme unter 768px änderst du `flex-direction` zu `column`. Das stapelt die Karten automatisch vertikal. Die Breite wechselt von 20% auf 100%, damit jede Karte die volle Breite nutzt.

Feature-Reihen korrekt formatieren

Jede Feature-Liste in einer Karte sollte auch responsive sein. Nutze hier auch Flexbox oder Grid, um sicherzustellen, dass Häkchen und Text nebeneinander passen. Auf mobil reicht eine Zeile aus — auf Desktop können Features nebeneinander stehen.

Best Practices für responsive Preistabellen

Padding und Margin anpassen

Auf Desktop können Karten engmaschig beieinander stehen. Mobil brauchst du mehr Platz zwischen den Elementen. Nutze `gap` in Flexbox, um Abstände konsistent zu halten. So wird’s nicht eng, auch wenn die Karte 100% breit ist.

Schriftgrößen mit clamp() skalieren

Preise und Titel sollten auf mobil nicht zu klein sein. Nutze CSS `clamp()`, um Schriftgrößen automatisch zwischen mobilen und Desktop-Werten zu interpolieren. So passt sich der Text flüssig an, ohne dass du mehrere Media Queries brauchst.

Empfohlene Pläne visuell hervorheben

Eine Karte sollte optisch dominieren. Das funktioniert am Desktop mit `transform: scale()` oder einem Rand. Mobil musst du vorsichtig sein — zu viel Styling wird überwältigend. Ein dickerer Rahmen und etwas mehr Padding reichen oft aus.

Buttons und CTAs griffig machen

Buttons in Preistabellen sollten auf mobil groß genug sein, um leicht zu treffen. Mindestens 44 44 Pixel ist eine gute Faustregel. Auf Desktop können sie kleiner sein. Nutze wieder Media Queries, um die Größe anzupassen.

Bildschirmvergleich zeigt Desktop-Preistabelle mit fünf Spalten nebeneinander und mobile Version mit vertikal gestapelten Karten

Praktisches Beispiel: Die CSS-Transformation

Desktop-CSS

.pricing-grid {
display: flex;
flex-direction: row;
gap: 2rem;
justify-content: center;
}

.pricing-card {
flex: 1 1 20%;
max-width: 280px;
padding: 2rem;
border-radius: 8px;
}

Mobile-CSS (unter 768px)

@media (max-width: 768px) {
.pricing-grid {
flex-direction: column;
gap: 1.5rem;
}
.pricing-card {
flex: 1 1 100%;
max-width: 100%;
padding: 1.5rem;
}
}

Der Unterschied ist minimal, aber entscheidend. Nur `flex-direction` und `flex-basis` ändern sich. Alles andere bleibt gleich. Das ist die Kraft von Flexbox — es ist elegant, wartbar und funktioniert überall.

Testen: Wie du deine Tabelle überprüfst

Nachdem du deine responsive Tabelle gebaut hast, musst du sie überprüfen. Das geht nicht nur im Browser. Du brauchst echte Geräte oder zumindest realistische Simulationen.

Chrome DevTools: Öffne deine Seite, drücke F12, und klicke auf das Geräte-Symbol. Du kannst verschiedene Bildschirmgrößen simulieren und sofort sehen, wie deine Tabelle reagiert. Achte auf Bruchpunkte bei 480px, 768px und 1024px.

Echte Geräte: Wenn möglich, teste auf echten iPhones und Android-Handys. Emulatoren sind nützlich, aber sie zeigen nicht immer, wie es wirklich aussieht. Gib deine Seite an Freunde weiter und frag nach Feedback.

BrowserStack: Für umfassendes Testing über verschiedene Browser und Geräte hinweg. Es ist nicht kostenlos, aber spart dir viel Zeit bei der Fehlerbehebung.

Lighthouse: Dieses Google-Tool prüft nicht nur Responsive Design, sondern auch Performance. Eine langsame Tabelle ist auch auf mobil unbrauchbar.

Smartphone zeigt Preistabelle im mobilen Stapel-Layout mit gut lesbarem Text und angemessener Größe für Touchscreen-Bedienung

Fazit: Deine Tabelle wird überall funktionieren

Responsive Preistabellen sind nicht kompliziert. Es ist kein schwarze Magie, keine versteckte Technologie. Es’s nur intelligentes CSS, das sich an die Realität anpasst.

Das Wichtigste: Desktop-Layouts funktionieren nicht auf mobilen Geräten. Aber das ist okay. Mit Flexbox und Media Queries kannst du eine Tabelle bauen, die überall gut aussieht — egal ob Desktop, Tablet oder Smartphone. Deine Nutzer werden es danken.

Beginne mit einer soliden HTML-Struktur. Baue das Desktop-Layout. Dann schreibe eine einfache Media Query für mobil. Teste es überall. Das war’s. Deine Preistabelle ist jetzt wirklich responsive.

Bereit zum Implementieren?

Beginne heute mit deiner responsive Preistabelle. Nutze die Techniken aus diesem Artikel und passe sie an deine eigenen Anforderungen an.

Mehr zum Preistabellen-Design

Hinweis zum Artikel

Dieser Artikel bietet technische Anleitung und Best Practices für responsive Preistabellen. Die gezeigten Techniken basieren auf aktuellen CSS-Standards. Browser-Kompatibilität kann je nach Zielgruppe variieren. Teste deine Implementierung gründlich auf echten Geräten und Browsern, bevor du sie produktiv einsetzt. Die beschriebenen Methoden sind Richtlinien — deine spezifische Situation kann Anpassungen erfordern.