Responsive table using Flexbox - Post...

User 2728698 Photo


Registered User
38 posts

So I'm new to the flebox thing and I've been reading and playing with the tutorials/flexbox theme in RSD but I have a question. I need a table or soemthign like a table, with 5 Headers and multiple rows below. My headers are: Wheel Diameter, Tread Width, Capacity Per Caster, Bearing, and Model #.
Then I have several "rows" below with the data. If I understand flexbox correctly, then I have an idea to make my table responsive.

At desktop view my table would be like this:
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5

Then at another breakpoint (like a tablet or phone):
Cell 1 Cell 2
Cell 3 Cell 4 Cell 5
Cell 1 Cell 2
Cell 3 Cell 4 Cell 5

And it would sort of be tweaked accordingly and each row of data would have its own background color alternating between grey and white to show the differences between the data.

My problem is this: when I get to a breakpoint, my containers stack but they stack on top of each other like this:
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5

How do I make it stack but not all of them at once? Did I miss something?
Monique

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.