Tabelle mit 6 Spalten die 3 logisch zusammengehörige Spalten à 2 Zeilen bilden sollen
bearbeitet von
@@tommy
> Ich will per <table>, Bootstrap
Nein. Nein.
> oder CSS folgendes erreichen:
> [](/images/54aac9a5-37df-4e65-96a9-c17efb6fc18b.jpg)
Das ganze Ding ist außen eine Flexbox, wobei die drei Spalten nebeneinander stehen (wenn denn genaug Platz dafür ist, ansonsten rutschen sie untereinander).
Jede der Spalten ist inm Inneren ein Grid. Und das war’s dann auch schon. So einfach ist CSS heutzutage. [Guckst du hier.](https://codepen.io/gunnarbittersmann/pen/pdBMRR)
Fallback für alte Browser ist eingebaut.
Im Markup habe ich Auszeichnungen mit Schema.org mit eingebaut. Eventuell könnten statt einer Beschreibungsliste auch `label`/`output`-Paare sinnvoll sein.
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)
Tabelle mit 6 Spalten die 3 logisch zusammengehörige Spalten à 2 Zeilen bilden sollen
bearbeitet von
@@tommy
> Ich will per <table>, Bootstrap
Nein. Nein.
> oder CSS folgendes erreichen:
> [](/images/54aac9a5-37df-4e65-96a9-c17efb6fc18b.jpg)
Das ganze Ding ist eine Flexbox, wobei die drei Spalten nebeneinander stehen (wenn denn genaug Platz dafür ist, ansonsten rutschen sie untereinander).
Jede Spalten ist ein Grid. Und das war’s dann auch schon. So einfach ist CSS heutzutage. [Guckst du hier.](https://codepen.io/gunnarbittersmann/pen/pdBMRR)
Fallback für alte Browser ist eingebaut.
Im Markup habe ich Auszeichnungen mit Schema.org mit eingebaut. Eventuell könnten statt einer Beschreibungsliste auch `label`/`output`-Paare sinnvoll sein.
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)