Repsonsive Table on Mobile - Reorder Layout
CodePen: https://codepen.io/Smgy94/pen/wvOjGyz
Happy Friday everyone!
I'm working on creating a timetable using a <table> for my page.
I'm having an issue on mobile with getting the content laid out exactly how I would like it on Mobile devices.
On Mobile view, I would essentially like to re-order the position of each classes so that they are in Order Mon - Fri, the issue is that currently they are all jumbled up.
I have created a mock-up using dev tools of the expected layout that I want to achieve.
I've watched Kevin's responsive tables video but I'm still unsure if what I would like to do is even possible.
Any advice/ recommendations / solutions on how to approach this would be greatly appreciated! 😃
5 Replies
please only put the relevant part in the codepen.
(i think in this case a grid, or even subgrid, would be an easier layout to handle it)
Noted, I've updated the Codepen now thanks.
I was hoping to keep it as a <table> for accessibility purposes ideally.
there is still a lot of unused css and js. only do the timetable part.
(it's not ideal for use to scroll through all of it)
i think with the current table format it will be difficult, for wide view you have the rows grouping a single class of everyday, while in mobile view you want to group all classes of a particular day. you'll need to group them in the other direction. (hense why i suggest subgrid)
https://codepen.io/MarkBoots/pen/zYbjBLY?editors=1100
Thanks so much! I really like this approach.
I'm thinking of potentially creating a seperate <table> for mobile that will only be displayed on smaller devices. This way I think I should be able to get my desired layout whilst also maintaining semantic html which would be good for accessibility. The downside would be having to manage two timetables but they're very rarely updated so I think it'd be worth that trade-off.