Tabellen fuer mobile Ansicht optimieren01.06.2015 (jh): Viele verzichten konsequent auf die Verwendung von Tabellen. Jedoch sind die Alternativen zur strukturierten Darstellung von Daten rar gesät. Eine Tabelle mit Divs zu gestalten ist möglich, aber äußerst unhandlich. Daher liegt es nahe, vorhandene Tabellen so zu optimieren, dass die Darstellung auf den verschiedenen Endgeräten problemlos und fehlerfrei vonstatten geht. Dann steht auch der Verwendung von Tabellen auf modernen Webseiten nichts mehr im Wege.

Anmerkung vorweg: Natürlich sind hier nur Tabellen gemeint, die zur Strukturierung von Daten im Content verwendet werden. Dass Tabellen nicht mehr zur Gestaltung des Grundgerüsts einer Webseite genutzt werden sollten, wird vorausgesetzt.

Bei der Recherche nach Tabellen, die sich auch für mobile Ansichten eigenen, bin ich auf mehrere Varianten gestoßen. Etliche Lösungen greifen auf mehr oder weniger lange Javascript-Schnipsel zurück. Es funktioniert und sieht gut aus, jedoch finde ich diese Möglichkeit für die schnelle Erstellung zu zeitaufwendig und zu fehleranfällig, wenn Mit-Autoren am Werk sind, die sich mit Javascript nicht auskennen. Bei weiterer Recherche bin ich schlussendlich auf eine sehr simple Methode gestoßen.

Nur HTML und CSS notwendig

Die Lösung liegt in der Positonierung mittels overflow-x per CSS. Ein Schatten längs der vertikalen Seiten signalisiert dem Benutzer, ob man die Tabelle nach links oder rechts scrollen kann. Die folgende CSS-Klasse muss lediglich einem <div> (<div class="mobiletable">...</div>) zugewiesen werden, der die Tabelle (<table>...</table>) umschließt:

.mobiletable {
    overflow-x: auto;
    background-attachment: local, local, scroll, scroll;
    background-color: #ffffff;
    background-image: -moz-linear-gradient(left center , #ffffff, rgba(255, 255, 255, 0)), -moz-linear-gradient(right center , #ffffff, rgba(255, 255, 255, 0)), -moz-linear-gradient(left center , #c3c3c5, rgba(195, 195, 197, 0)), -moz-linear-gradient(right center , #c3c3c5, rgba(195, 195, 197, 0));
    background-position: 0 0px, 100% 0px, 0 0px, 100% 0;
    background-repeat: no-repeat;
    background-size: 4em 100%, 4em 100%, 1em 100%, 1em 100%;
}

Folgende Beispieltabelle veranschaulicht die Lösung (bitte Browserfenster verkleinern):

ZeichenBeschreibungName in HTMLNCR hex.NCR dez.
" Anführungszeichen oben &quot; &#x22; &#34;
& Ampersand-Zeichen, kaufmännisches Und &amp; &#x26; &#38;
< öffnende spitze Klammer &lt; &#x3C; &#60;
> schließende spitze Klammer &gt; &#x3E; &#62;
' Apostroph, einfaches Anführungszeichen oben (nur bei XHTML definiert) &apos; &#x27; &#39;

Das Aussehen lässt sich in gewohnter Weise nach Belieben per CSS anpassen. Diese Lösung besticht durch ihre Einfachheit. Die Scrollbalken sind auf iOS-Geräten in der Regel nicht sichtbar. Die Tabelle lässt sich auf Smartphones "wischen".

Gefunden unter: http://www.the-haystack.com/2013/09/24/responsive-scrollable-tables/

 

Aktuelles im Blog

Haben Sie Fragen?

Rufen Sie mich an:

+49 176 56982110

Oder nutzen Sie das Kontaktformular

The Lead-Machine!

Lead- und Sale-Generierung.

Marketing Lead und Sale GenerierungSie bieten Produkte oder Dienstleistungen im End-Consumer-Bereich und brauchen Kunden? Henz Media hat Sie!

Angebot anfordern

Unverbindlich & kostenlos

Icon Angebot anfordern 70x70Vereinbaren Sie jetzt ein Beratungsgespräch und erhalten Sie ein völlig unverbindliches Angebot. Zum Formular

Ihre Webseite

Eindruck hinterlassen

Icon Webseite erstellen 70x70Der erste Einduck zählt. Dies gilt insbesondere für die Außendarstellung im Web. Henz Media erstellt günstige und professionelle Webseiten.

Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.
Weitere Informationen Ok