Tailwind CSS: Displaying Table Content At Smaller Screen Sizes
In this video, we'll go through a few iterative steps to improve the way we display table content on smaller devices.
We'll first make the table scroll horizontally to avoid breaking the layout. We'll then hide a few table columns based on the available viewport width.
Then, we'll collapse the content of multiple columns into one single column.
Finally, we'll opt out of using a table for smaller screens, and use a totally different card layout instead.
Enjoying my teaching style? I'm creating an independent Tailwind CSS course called Pro Tailwind. Check it out at https://protailwind.com ❤️
Chapters
0:00 Intro
0:29 Starting point
1:29 Horizontal scrolling
2:18 Collapsing columns
4:40 Stacking columns
11:52 Alternative layout
13:14 Let's Recap!
Watch video Tailwind CSS: Displaying Table Content At Smaller Screen Sizes online without registration, duration hours minute second in high quality. This video was added by user simonswiss 13 December 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 38,638 once and liked it 2.2 thousand people.