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!
Смотрите видео Tailwind CSS: Displaying Table Content At Smaller Screen Sizes онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь simonswiss 13 Декабрь 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 38,638 раз и оно понравилось 2.2 тысяч людям.