Responsive Tabellen mit CSS

Weitere Alternativen

Es gibt noch einige weitere Möglichkeiten, wie man eine große Tabelle auf einem kleinen Bildschirm darstellen kann, außer transponieren und drehen. Diese Optionen werden hier nur der Vollständigkeit halber erwähnt und nicht anhand von Code-Beispielen erklärt.

So kann man die Tabelle auch einfach verkleinert darstellen, z.B. mit per CSS transform: scale(0.5), oder einfach mit als Anwender per Hand der Zoomfunktion des Gerätes. Entweder schwer zu lesen oder umständlich zu bedienen.

Eine weitere Möglichkeit ist es, die Tabelle zu scrollen, mit overflow-y: auto, auch dies wieder mit der Hand, und es gibt Code-Unterstützung für Touch-Bedienung.

Oder Teile der Tabelle werden auf kleinen Bildschirmen nicht angezeigt, oder die Ansicht wird per Button umgeschaltet. Dazu einfach den Zellen weitere Klassen zuweisen, die dann per CSS ausgeblendet werden. Im obigen Beispiel könnte die Klimatabelle erst nur von Januar bis Juni angezeigt werden, und auf Knopfdruck (sprich: Button) wird auf Juli bis Dezember umgeschaltet.


  1. Der erste Versuch, mit <table>
  2. Der zweite Versuch, mit <div>
  3. Der dritte Versuch, mit <ul>
  4. Erste Alternative: die Tabelle um 90° drehen
  5. Weitere Alternativen
Über Arno Beckmann

Arno Beckmann ist Informatiker und freier Web-Entwickler, und lebt in Hamburg-Bergedorf.