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 ❤️ # 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!