How to create a responsive HTML table

>> YOUR LINK HERE: ___ http://youtube.com/watch?v=czZ1PvNW5hk

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: https://adrianroselli.com/2017/11/a-r... • ✅ Adrians JS Scripts to add aria to tables (and lists): https://adrianroselli.com/2018/05/fun... • ⌚ 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 • 💬 / discord • Keep up to date with everything I'm up to • ✉ https://www.kevinpowell.co/newsletter • Come hang out with me live every Monday on Twitch! • 📺 / kevinpowellcss • --- • Help support my channel • 👨‍🎓 Get a course: https://www.kevinpowell.co/courses • 👕 Buy a shirt: https://teespring.com/stores/making-t... • 💖 Support me on Patreon: / kevinpowell • --- • My editor: VS Code - https://code.visualstudio.com/ • --- • 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: / kevinjpowell • Codepen: https://codepen.io/kevinpowell/ • Github: https://github.com/kevin-powell • --- • And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

#############################

New on site