nicht angemeldet
Hallo,
die Anleitung ist vollständig und dadurch leider etwas unübersichtlich und wirkt dadurch eventuell abschreckend, das Grundprinzip ist aber relativ einfach.
Tabellenzellen können auch als Inline-Block oder Blockelemente dargestellt werden. Das ist vielen Webseitenerstellern nicht bekannt.
Wenn bei zu schmalem Fenster mehrere Zellen nebeneinander rutschen sollen, werden sie als Inline-Block-Elemente ( display: inline-block; ) dargestellt. Über die Breite (width, padding) kann gesteuert werden, wie viele Zellen nebeneinander stehen sollen.
Sollen bei noch schmalerem Fenster oder um Daten herauszuheben die Zellen jeweils in einer Zeile stehen, werden sie als Block-Elemente ( display: block; ) dargestellt. Inline-Block mit entsprechender Breite würde zwar auch gehen, aber dann ärgert einen eventuell der rechte Zwangsabstand.
Sobald die Zellen als Inline-Block- oder Block-Element angezeigt werden, wird gleichzeitig die 1. Zeile mit den Überschriften ausgeblendet ( display: none; ). Und mittels CSS und des Pseudoelements ::before vor jeder Zelle eingeblendet.
Die restlichen Angaben dienen "nur" der Optik. Die kannst du hinzufügen, wenn die Tabelle sich so verhält wie du es dir vorstellst.
Am besten läßt du also erst mal nur inline-block mit Breitenangaben und block auf deine Tabelle los und schaust, wie sie sich verhält.
Gruss
MrMurphy
Gunnar Bittersmann