Sometimes, using a table is the best option, but making them responsive isn’t very fun. Luckily, it doesn’t have to be that hard!
We do need to be careful though, because when we change the display property of the different elements in a table, it will strip them semantics away, but there’s a nice and pretty simple fix for that as well 🙂.
🔗 Links
✅ Adrian Roselli’s in-depth article on responsive, accessible tables: [ Ссылка ]
✅ Adrians JS Scripts to add aria to tables (and lists): [ Ссылка ]
⌚ Timestamps
00:00 - Introduction
00:46 - Setting up the table
07:00 - My main source of info for this
07:31 - Basic CSS to get the table looking better
10:19 - Very simple responsiveness
11:07 - More CSS styles to improve the look
13:30 - The easiest way to make it responsive with a table-container
15:31 - A more robust solution
20:55 - Alternative to data-attributes
22:50 - Using grid to improve the layout inside cells a little
24:10 - Fixing the accessibility at small screen sizes
#css
--
Come hang out with other dev's in my Discord Community
💬 [ Ссылка ]
Keep up to date with everything I'm up to
✉ [ Ссылка ]
Come hang out with me live every Monday on Twitch!
📺 [ Ссылка ]
---
Help support my channel
👨🎓 Get a course: [ Ссылка ]
👕 Buy a shirt: [ Ссылка ]
💖 Support me on Patreon: [ Ссылка ]
---
My editor: VS Code - [ Ссылка ]
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Twitter: [ Ссылка ]
Codepen: [ Ссылка ]
Github: [ Ссылка ]
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
