How to create a responsive HTML table

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-responsive-accessible-table.html ✅ Adrians JS Scripts to add aria to tables (and lists): https://adrianroselli.com/2018/05/functions-to-add-aria-to-tables-and-lists.html ⌚ 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 💬 https://discord.gg/nTYCvrK 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! 📺 https://www.twitch.tv/kevinpowellcss --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome 💖 Support me on Patreon: https://www.patreon.com/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: https://twitter.com/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!