Toptube Video Search Engine



Title:How to create a responsive HTML table
Duration:27:19
Viewed:207,115
Published:20-04-2023
Source:Youtube

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!



SHARE TO YOUR FRIENDS


Download Server 1


DOWNLOAD MP4

Download Server 2


DOWNLOAD MP4

Alternative Download :