Zum Inhalt
IT & Medien Centrum der 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.

Auf Desktop-Auflösungen wird die Tabelle wie gewohnt dargestellt.
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.

Ö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.
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.
Option "Keine": Ohne ausgezeichnete Kopfzeilen werden sämtliche Zellen zeilenweise untereinander dargestellt. Der Bezug der Inhalte zu Spaltenüberschriften geht verloren.
Option "Erste Zeile": Hierbei werden die Spaltenüberschriften der ersten Zeile vor den einzelnen Zellen wiederholt und gefettet dargestellt.
Option "Erste Spalte": Die Inhalte der ersten Spalte werden als Zeilenüberschriften ausgezeichnet und gefettet dargestellt. Der Bezug der Inhalte zu Spaltenüberschriften geht verloren.
Option "Beide": Bei dieser Option werden die Inhalte der ersten Zeile, sowie die Inhalte der ersten Spalte als Überschriften ausgezeichnet und gefettet dargestellt.