Zum Navigationspfad Unterseiten von „Arbeiten mit TYPO3“ Zur Navigation Zum Schnellzugriff Zum Fuß der Seite mit weiteren Services
Zum Inhalt
TYPO3 Doku Auftritt
IT & Medien Centrum der TU Dortmund
ITMC Gebäude © Saskia Molewicz ​/​ TU Dortmund

Responsive Tabellen

Das Inhaltselement "responsive Tabelle" wurde speziell für den Einsatz in einem responsiven Layout konzipiert. Dies bedeutet, dass sich die Darstellung der Zellen je nach Bildschirmbreite anpasst, sodass die Inhalte immer optimal auf dem jeweiligen Endgerät lesbar sind. 

Auf kleinen Bildschirmbreiten werden die einzelnen Zellen dabei untereinander dargestellt und die Überschriften in jeder Zelle wiederholt. Eine korrekte Zuordnung der Inhalte ist auf diese Weise gewährleistet (siehe Screenshots unter dem Absatz).

Für die Auszeichnung von Überschriften auf kleinen Endgeräten stehen Ihnen dabei verschiedene Optionen zur Verfügung, auf die wir im nächsten Abschnitt eingehen.

Die Ansicht einer regulären Tabelle auf einem Desktop PC.
Auf Desktop-Auflösungen wird die Tabelle wie gewohnt dargestellt.
Die Ansicht einer responsiven Tabelle mit einer Spaltenüberschrift auf dem Smartphone. Die Spaltenüberschrift wird vor den einzelnen Zellen wiederholt.
Auf kleinen Endgeräten werden die Zellen untereinander dargestellt. Die Überschriften werden je Zelle wiederholt.

Wichtig:
Benutzen Sie KEINE verbundenen Zellen in responsiven Tabellen. Die Responsivität kann hierbei nicht gewährleistet werden. Wenn Sie verbundene Zellen nutzen, testen Sie unbedingt, ob sich die Tabelle so verhält wie gewünscht.

Gut zu wissen:
Die Breite der einzelnen Spalten kann nicht manuell gesetzt oder angepasst werden. Die Breite wird immer vom jeweiligen Browser anhand des Inhalts der jeweiligen Spalte bestimmt.

Die Auszeichnung von Überschriften

Um die Überschriften auf kleineren Displays zellenweise zu wiederholen, müssen diese in den Tabelleneigenschaften korrekt ausgezeichnet werden.

Das Kontextmenü der responsiven Tabellen
Öffnen Sie das Inhaltselement und klicken Sie innerhalb der Tabelle mit der rechten Maustaste, um das Kontextmenü zu öffnen. Wählen Sie hier den Eintrag "Tabellen-Eigenschaften" aus.
Die Tabelleneigenschaften des Elements "Responsive Tabelle"
Es öffnet sich ein Overlay-Fenster, in welchem Sie die Tabellen-Eigenschaften bearbeiten können. Wählen Sie im Dropdown-Menü "Kopfzeile" aus, welche Überschriften auf kleineren Displays zellenweise wiederholt werden sollen. Die möglichen Optionen sind in den folgenden Screenshots näher erläutert.
Die Ansicht einer responsiven Tabelle ohne Überschriften. Alle Inhalte werden untereinander dargestellt.
Option "Ohne": Ohne ausgezeichnete Überschriften werden sämtliche Zellen zeilenweise untereinander dargestellt.
Die Ansicht einer responsiven Tabelle mit einer Spaltenüberschrift auf dem Smartphone. Die Spaltenüberschrift wird vor den einzelnen Zellen wiederholt.
Option: Erste Spalte": Hierbei werden die Einträge der ersten Spalte vor den einzelnen Zellen wiederholt und gefettet dargestellt.
Die Ansicht einer responsiven Tabelle mit Zeilenüberschrift auf dem Smartphone. Alle Informationen werden untereinander dargestellt.
Option "Erste Zeile": Hierbei verhält sich das Element wie bei "Kopfzeile: Ohne". Die Spaltenüberschriften der ersten Zeile werden zudem gefettet dargestellt.
Die Ansicht einer responsiven Tabelle auf einem Smartphone. Alle Informationen sind übersichtlich untereinander dargestellt.
Option "Beides": Bei dieser Option werden die Spaltenüberschriften der ersten Zeile, sowie die Inhalte der ersten Spalte zellenweise wiederholt und gefettet dargestellt.

Umstellung auf „Responsive Tabelle”

Nicht responsive Tabellen konnten bisher in den Inhaltselementen "Tabelle" oder "Text" mittels der Tabellenschaltfläche des Rich Text Editors erstellt werden.
Inhaltselemente vom Typ Text können sich auch in News, Veranstaltungen, Tab-Elementen, dem Akkordeon Plus und auch im Zweispaltigen Design befinden.

Um diese in responsive Tabellen umzuwandeln,  ändern Sie zunächst den Typ des Elements auf "Responsive Tabelle".
Es ist dabei unerheblich, ob in den Inhaltselementen eventuell außer der Tabelle weiterer Text enthalten ist. Dieser wird im Inhaltselement "Responsive Tabelle" unverändert angezeigt.

Danach müssen Sie die gesetzten Kopfzeilen einmal vollständig über die Tabelleneigenschaften entfernen und neu setzen.

Testen Sie danach, ob Ihre Tabelle erfolgreich umgewandelt wurde.
In seltenen Fällen ist dies nicht erfolgreich. Dann müssen Sie Ihre Tabelle neu als responsive Tabelle anlegen.

 

Die Umwandlung des Inhaltselements "Tabelle" in "Responsive Tabelle".
Sofern keine verbundenen Zellen oder Spalten vorhanden sind, können Sie bestehende Tabellen über die Typänderung direkt abändern.
Zum Seitenanfang