TailwindCSS responsive tables on mobile screens

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...

[@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]

Yup! Forgot there is a tailwind variant for almost everything 🤣. I might do a video on those just to catch up

[@Ca3yMiX]

@@cdruc 😅 btw i came from react .. but tailwind used in jsx part so i can follow .. thanks for the video 🙌

[@oketafred]

Your content is the best 👏👏👏👏. You deserve a million likes and subscribers 👏👏👏👏

[@binodsharma112]

Thanks .. I was using table wrong in.. its so much helpful.

[@RandomMusicD]

Dude, I was really lost using tables with Django and Tailwind, this saved me, so thaaanks,

[@cdruc]

Glad you find it helpful! 👊

[@barraganroberto]

This is crazy great! Thank you so much!! 👏

[@themarksmith]

Loving the videos on tailwind... Not into PHP (sorry) but your CSS, JS, etc. stuff is great - thank you!

[@cdruc]

If it wasn't for Laravel, I probably wouldn't be into php as well, so that's ok 😂
Glad you enjoy the others!

[@CollinsKreation]

This is sick... I love it...thanks

[@aguswidi9316]

I'm lucky to found gems video. Awesome toturial. And thank's

[@nicolasportu]

Outstanding! Best of its kind 😃

[@JokerBench]

Awesome video! I hope you can make a tutorial for the pagination as well

[@neilgilroy1629]

Great video!

[@Curdledx]

very good video - even understandable for me as a backend / database guy :)

[@cdruc]

Glad you find it useful!

[@kohelet910]

Nice job !

[@marcelosantoscorrea]

Very very good!!!

[@jitx2797]

now this is awesome

[@Doowi92]

Very helpfull tutorial and well explained it helps me alot, you have earn 1 more sub

[@GammaWraith]

Really nice, should definitely add some sticky headers then it will be golden

[@paschanchik]

Реально красиво получилось. Спасибо

[@yagovelazquez9140]

good stuff bro

[@namikazedevj46]

this is so underrated

[@shaikotikbalhridoy2039]

Awesome bro, i like it ❤

[@goto...7056]

Great! Thank you!

[@goto...7056]

Also I discovered your website - a lot of useful information, I'll start using it tomorrow.

[@cdruc]

Thanks! I hope you’ll find it helpful 👊

[@elfreddy5]

great video, I was able to use the idea in my project. Datatables and mobiles are not visually compatible at all.

[@arellanojv1]

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]

Correct! Here: ruclips.net/video/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.

[@kimbapslayer1995]

Clean clean

[@jasonb202020]

nice

[@asselita2463]

How can i prevent my table from stretching? because now horizontal scrollbar appeared, PLEASE HELP ME 🙏🙏🙏🙏

[@maxwellmuhanda7940]

damn i cant explain how mucn i have learn in such a s small time

[@clipocasGames]

code please

[@programacion5536]

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

[@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]

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]

I agree with @NekoJinFel. This looks like someone puked up CSS classes all over the page. This is worse than old school Div-itis.

[@nithinrajendran3091]

How to deal with table in mobile devices?
Hide it.
Awesome content though.