Тёмный

TailwindCSS responsive tables on mobile screens 

cdruc
Подписаться 9 тыс.
Просмотров 68 тыс.
50% 1

In this video we'll see what solutions we have when it comes to making tailwindcss responsive tables look good on mobile devices.
Code snippets: tallpad.com/series/tailwindcs...

Наука

Опубликовано:

 

31 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 42   
@Ca3yMiX
@Ca3yMiX Год назад
in a real case we would have dynamic table data, so instead of styling each tr individuality you can use more in the doc, thanks for the video 🙌
@cdruc
@cdruc Год назад
Yup! Forgot there is a tailwind variant for almost everything 🤣. I might do a video on those just to catch up
@Ca3yMiX
@Ca3yMiX Год назад
@@cdruc 😅 btw i came from react .. but tailwind used in jsx part so i can follow .. thanks for the video 🙌
@oketafred
@oketafred 2 года назад
Your content is the best 👏👏👏👏. You deserve a million likes and subscribers 👏👏👏👏
@binodsharma112
@binodsharma112 Год назад
Thanks .. I was using table wrong in.. its so much helpful.
@RandomMusicD
@RandomMusicD Год назад
Dude, I was really lost using tables with Django and Tailwind, this saved me, so thaaanks,
@cdruc
@cdruc Год назад
Glad you find it helpful! 👊
@barraganroberto
@barraganroberto Год назад
This is crazy great! Thank you so much!! 👏
@CollinsKreation
@CollinsKreation 2 года назад
This is sick... I love it...thanks
@JokerBench
@JokerBench Год назад
Awesome video! I hope you can make a tutorial for the pagination as well
@nicolasportu
@nicolasportu 8 месяцев назад
Outstanding! Best of its kind 😃
@aguswidi9316
@aguswidi9316 11 месяцев назад
I'm lucky to found gems video. Awesome toturial. And thank's
@themarksmith
@themarksmith 2 года назад
Loving the videos on tailwind... Not into PHP (sorry) but your CSS, JS, etc. stuff is great - thank you!
@cdruc
@cdruc 2 года назад
If it wasn't for Laravel, I probably wouldn't be into php as well, so that's ok 😂 Glad you enjoy the others!
@neilgilroy1629
@neilgilroy1629 Год назад
Great video!
@kohelet910
@kohelet910 2 года назад
Nice job !
@arellanojv1
@arellanojv1 2 года назад
for option number 2. in production are you going to render the data at the same time as the table or you will make a trigger if it hits a specific media query?
@cdruc
@cdruc 2 года назад
Correct! Here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-S4MhQ6peq8A.html On line 5 I'm hiding the table on screens less than 768px in width using hidden md:block, and on line 59 I'm showing the grid&cards but only until I reach 768px - from here on the table will be visible.
@marcelosantoscorrea
@marcelosantoscorrea 2 года назад
Very very good!!!
@GammaWraith
@GammaWraith 2 года назад
Really nice, should definitely add some sticky headers then it will be golden
@Curdledx
@Curdledx Год назад
very good video - even understandable for me as a backend / database guy :)
@cdruc
@cdruc Год назад
Glad you find it useful!
@Doowi92
@Doowi92 11 месяцев назад
Very helpfull tutorial and well explained it helps me alot, you have earn 1 more sub
@jitx2797
@jitx2797 Год назад
now this is awesome
@paschanchik
@paschanchik Год назад
Реально красиво получилось. Спасибо
@elfreddy5
@elfreddy5 Год назад
great video, I was able to use the idea in my project. Datatables and mobiles are not visually compatible at all.
@yagovelazquez9140
@yagovelazquez9140 Год назад
good stuff bro
@shaikotikbalhridoy2039
@shaikotikbalhridoy2039 7 месяцев назад
Awesome bro, i like it ❤
@asselita2463
@asselita2463 Год назад
How can i prevent my table from stretching? because now horizontal scrollbar appeared, PLEASE HELP ME 🙏🙏🙏🙏
@goto...7056
@goto...7056 2 года назад
Great! Thank you!
@goto...7056
@goto...7056 2 года назад
Also I discovered your website - a lot of useful information, I'll start using it tomorrow.
@cdruc
@cdruc 2 года назад
Thanks! I hope you’ll find it helpful 👊
@namikazedevj46
@namikazedevj46 Год назад
this is so underrated
@jasonb202020
@jasonb202020 2 года назад
nice
@kimbapslayer1995
@kimbapslayer1995 Год назад
Clean clean
@clipocasGames
@clipocasGames Год назад
code please
@maxwellmuhanda7940
@maxwellmuhanda7940 9 месяцев назад
damn i cant explain how mucn i have learn in such a s small time
@NekoJinFel
@NekoJinFel Год назад
I’m still trying to understand what advantage tail wind has for developers who already know CSS. It would be even cleaner to write CSS inside dedicated file and not have to clutter the HTML.
@hemrastyl6765
@hemrastyl6765 8 месяцев назад
In Software development, we want to get money as fast as we possibly can unless you have other goals, and how do we achieve that? By being productive and saving time. That's where Tailwind comes in.
@whintersby
@whintersby 2 месяца назад
I agree with @NekoJinFel. This looks like someone puked up CSS classes all over the page. This is worse than old school Div-itis.
@programacion5536
@programacion5536 11 месяцев назад
I think they could be accessibility issues if you use a grid div instead of a the table element. The first approach is the best, imo
@nithinrajendran3091
@nithinrajendran3091 Год назад
How to deal with table in mobile devices? Hide it. Awesome content though.
Далее
10 Tailwind Tricks You NEED To Know!
10:45
Просмотров 263 тыс.
Which bus driver am I?🚌
00:13
Просмотров 1,8 млн
I need your help..
00:28
Просмотров 2,5 млн
Мама ударила дочь #shorts #iribaby
00:17
Styling Forms with Tailwind CSS
17:25
Просмотров 138 тыс.
I Never Want to Create React Tables Any Other Way
5:40
Styling HTML tables with CSS -  Web Design/UX Tutorial
9:52
How to create a responsive HTML table
27:19
Просмотров 204 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 890 тыс.
Theming Tailwind with CSS Variables
27:24
Просмотров 117 тыс.
Solving one of PostgreSQL's biggest weaknesses.
17:12
Просмотров 171 тыс.
Fiber kablo
0:15
Просмотров 8 млн