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!
1 view
23
6
1 month ago 02:20:39 1
How to Build and Deploy a Portfolio with that Will Land You Jobs
2 months ago 00:06:06 5
Vue Unit Тестирование #19 - Тест компонента прогресса в шапке
2 months ago 09:19:00 2
Beginner Tailwind [FULL COURSE]
2 months ago 00:04:57 1
Vue Unit Тестирование #18 - Тест компонента прогресса в шапке
2 months ago 00:11:32 5
Vue Unit Тестирование #17 - Тест компонента прогресса в шапке (мокирование модулей)
2 months ago 00:07:12 1
Vue Unit Тестирование #16 - Тест компонентов шапки и навигации
2 months ago 00:05:19 6
Vue Unit Тестирование #15 - Тест формы создания активностей
2 months ago 00:03:52 2
Vue Unit Тестирование #14 - Тест формы создания активностей
2 months ago 00:06:45 5
Vue Unit Тестирование #13 - Тест формы создания активностей (spies)
2 months ago 00:05:46 1
Vue Unit Тестирование #12 - Тест формы создания активностей
2 months ago 00:04:26 3
Vue Unit Тестирование #11 - Тест пустого состояния на странице активностей
2 months ago 00:07:37 4
Vue Unit Тестирование #10 - Тест компонента выпадающего списка (рефакторинг)
2 months ago 00:06:43 1
Vue Unit Тестирование #9 - Тест компонента выпадающего списка
2 months ago 00:06:42 4
Vue Unit Тестирование #8 - Тест компонента выпадающего списка
2 months ago 00:07:09 3
Vue Unit Тестирование #7 - Тест компонента выпадающего списка
2 months ago 00:06:07 3
Vue Unit Тестирование #6 - Тест компонента иконки с помощью снимков (snapshots)
2 months ago 00:08:09 1
Vue Unit Тестирование #5 - Тест компонента иконки
2 months ago 00:04:31 5
Vue Unit Тестирование #4 - mount vs shallowMount
2 months ago 00:04:35 6
Vue Unit Тестирование #3 - Тест компонента кнопки
2 months ago 00:11:00 5
Build HTML Emails with Maizzle - Introduction
2 months ago 00:14:12 1
Subgrid in Tailwind CSS - You didn’t know you needed this
2 months ago 00:11:07 19
Vue Unit Тестирование #2 - Тест компонента кнопки
2 months ago 00:03:36 18
Vue Unit Тестирование #1 - Установка проекта
3 months ago 00:04:35 2
ТОП БЕСПЛАТНЫХ Курсов по Frontend! Javascript, React, Vue, Angular... ВЫУЧИТЬСЯ С НУЛЯ!