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!