Tailwind CSS: Displaying Table Content At Smaller Screen Sizes
ฝัง
- เผยแพร่เมื่อ 4 ส.ค. 2024
- 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 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! - บันเทิง
As a user, I find it _super annoying_ when developers hide information on smaller screens. I've run into this multiple times, when there's information about something I _know is there_, but because I happened to visit on a phone, I cannot see it _anywhere_. To find the information I have to emulate desktop, which is not great, and depending on the browser, not even possible.
That is a very valid and good point! Another good reason to switch to a more suitable layout like a card on mobile, instead of hiding info because it's hard to display. Thanks for this comment!
I probably watch thousands of videos every year and I must say this video is easily one of the best I have watched during 2023. Thank you Simon and have a wonderful day!
same feeling here. some fulfillment 😁
Oh my... this is big praise right there, thank you so much!! You have made my week ❤
Nawwwwww thank you!! @@xWe2s
Ditto. This is my first time watching a @simonswiss video. The planning and execution of this video are exceptional. I particularly like the the incremental development with examples to explain what the classes are doing. Bravo!
Thank you so much!! @@ReeceHart
max-w-0 and max-w-none is breaking my brain. Great video!
Your brain and mine!
I think the default is max-w-auto, which tries to use more space than needed. Setting it to 0 lets you intentionally not use any more than necessary.
Same stuff happens with vertical scrolling containers and `min-h-0` magically fixing it. Mind bending.
This is such a good video. Thank you so much for your inputs. I have run into the exact same issues and really like your approaches.
As always, just awesome and to the point!
I don't like wasting people's time 🤗
High quality content! This is pure gold!
Thank you so much - happy you enjoyed it!
love the content. New trailer is killer!!
Masterclass! Thank you!
❤❤
Incredibly helpful tips, Thank You for sharing. ❤
Very glad to hear that it's useful!
I had never been aware of or used dl elements before . Thank you Simon
You need to build a food recipe website - they're the go-to `dl` ingredient list 🤣
Helpful tips, thank you so much for sharing.
You're welcome!
Amazing work as always! Thanks a lot for this great quality content Simon!
You're welcome!
Awesome video, you are my tailwindCSS go-to guy!
Awwww, thank you!
Thank you for managing to convince me to learn Tailwind. You're a great teacher and creator. Thank you.
Thank you so much - that really means a lot. Super glad I can inspire you to learn and enjoy Tailwind 🙏
This channel is amazing for learning the beautiful parts of Tailwind 🎉
Thank you for your support!
This video as always is on fire!!!💥
The quality of video-set, the picture with blur, the parts of the video with covers, the music that is not anoying, the example of topic with tricks... and all of that it's just WOW!!! 😍😍😍PERFECTION!!! Thank you so much, very useful information!👍
WOW - thank you so much for your kind words - I really appreciate that ❤❤
You know you're weird when you get excited by a video like this. 😂
Love it!
Haha I definitely get excited by weird things too 🤣
The content we are missing! Cool
I too am missing this content 😅
That outro was sick, it's the little things
Haha what do you mean - to me, the intro/outro are the most important parts of videos 🤣
Thank you for noticing! :)
Really like your videos man. So easy and simple to follow
Thanks for this comment - this means a lot!
Great work as always! Another alternative, instead of duplicating data and switch between table and cards, is to apply, when reaching small sizes, display:grid on table and play with cells by positioning them.
Absolutely fantastic!
Thank you so much!
I happy that you started to make tailwindcss videos
Hoping to make plenty more!
That was super cool thanks for the video ❤
Glad you enjoyed it!
Wow, Its awesome...
I was looking forward like this videos, where the theory will be explained how it works and then the code will solve it.
You are awesome at explaining things thanks man
Thank you for the kind words!
I like the video editing... Great job!
Thank you! I enjoy editing videos a lot!
Hey man, I don‘t even know why this catches me so hard but this is easily one of the most useful CSS tutorials I have ever seen. I am personally really struggling with responsive layouts but these techniques are just awesome. Also you basically covered every question I had in mind while watching. Great job!
Woohoooo, thank you so much!
Woow!!! Great tutorial brother. So useful content.
Glad you enjoyed it
Incredible, great approach, working with responsive tables has always been a bit annoying to meet all the breakpoints but the way you approached it was incredible.
Glad it was helpful!
making it look easy as always 🤙
🤗🤗
It calls quality content. I just closed the tab after watching this video but I regrated, so I pressed Ctrl+shift+T to subscribe and like.
thank you a lot to Introduce me with whole new features and usages.
Thank you so much!
really cool content, i normally just accepted that there were x scrolls, but now ill apply those strategies.
Haha great to hear!
Great Video!!
Thanks!
Helpful. Thanks.
My pleasure, glad it's helpful!
A M A Z I N G!!! PLEASE MAKE MORE VIDEOS!!!
T H A N K Y O U !! ❤
Simon Simon Simon ....... I just LOVE your tailwind video's! They always give me more insight than what ever other video! The worckation video's of Adam come close, but not more that that close
Thank you! This is big praise - and I appreciate it a lot ❤
Thanks for a good video Simon
You're welcome Sijmon 🤗
awesome one 👏👌 thanks for sharing
Ayyyyee my pleasure!
Amazing 😅 Thank you so much 😊
No problemo!
This was interesting. I like that the strategies discussed aren't anything "tailwind specific" necessarily. I literally told my designer like 2-3 months ago that, "Tables really don't work well on small screens, unless they've only got a few columns -- they're not as easy to style as CSS grid / flexbox." But I hadn't really considered some of these approaches -- leveraging React to just always add in the "extra data," and then when the screen shrinks just stack the columns based on breakpoints -- it seems so obvious in hindsight.
Yeah, I always try to teach the underlying CSS behind what Tailwind does.
My videos are about CSS first and foremost - Tailwind is just the format I like to create those styles 😅
Great content ✨
Thank you! 💫
Thats grate tutorial! I really like your style and way you can explain concepts🙂. The only thing I missed from this tutorial is link to the code base used in this video 😅 Other than that I love it and can't wait for more 😊
I LOVE LOVE LOVE IT
YES YES YESSSS Thank you!
lol, your timing is scary good! I was just looking for a good solution yesterday.
I know, I could feel it so I made a video for you 🤣
@@simonswiss love it! I know I can always count on you Simon 😁
🤜🤛
Dear Simon, although I am an advanced user of Frontend/Tailwind and already know all these tricks, I still watched this video with great pleasure.
I registered that you disappeared from the Tailwind Labs channel (I don't know the reasons or ask why), but I'm glad to have rediscovered you. I follow a lot of technical channels/lecturers but you are a heartthrob for me, I love your teaching style and your friendly and positive face, don't run away anymore! :-) (Don't worry, I'm not gay, I have a wife and kids, but I really like you!).
Too bad you don't do videos on Vue.js, but I'm looking forward to more CSS/TW videos.
.
And nice wave of hair, but I liked the previous "rooster" style better 🙂
Thank you so much!!
I am no longer on the Tailwind Labs team since March 2022, when they decided to (very abruptly) cut me off the team.
I would have happily continued making great quality videos for a long time with them - matter of fact I still am now, but with no one paying me 🤣
I really appreciate the kind comments. And by the way, my hair is much longer now. Like... MUCH longer.
Very useful video
Nice to hear it's useful!
this is gold
🏆
this was really helpful
That's great to hear!
Bootstrap does this in a very similar way. You can make the table "responsive" with the horizontal scroll bar or you can hide columns based on view width. Or you can use container queries, my new bff.
Yes I love container queries too!
Love it
That's great to hear - thanks for the support!
Awesome
🙏
Teşekkürler, güzel anlatım.
Rica ederim, izlediğiniz için teşekkürler!
Good stuff, instant Like and Subscribe!
Amazing, thank you!
Tables are so annoying when it comes to the small screen, I had done the “hiding” data as screen goes smaller and made the row clickable where a modal/popout will show up with all the details. But looking at the last method of going cards rather than rows… i wish i did that 😂. Great video thanks!🙏🏻
Yeah, I think breaking out to a completely different layout is much more liberating!
Really great work... So can add pagination to that table
Salamat idol...
UpVote ALTERNATIVE LAYOUT 👍
Agreed!
nice
I learn CSS concept more from TailwindCSS than vanilla it self.. 😂
Me too! And yes, I always try to teach CSS, disguised behind Tailwind utility classes 😅
That max-w-0 trick made my jaw drop.
It makes my head hurt 😅
Subscribed
Awesome, thank you!
I've done a twist on the last option before now. Rather than have 2 separate layouts with one table and one cards, I replicated a table with Grid. At large sizes it just looks like a table. At smaller sizes it collapses down to cards.
Oh that sounds pretty cool! You should make a video about it 🤗
Awesome thanks! Really clear everything. Could you link your repo so we can use it as an example? 😬
This is using Tailwind UI components so I cannot share the code, unfortunately.
i understand. As a teacher I love this short but specific use cases. new subscriber here! @@simonswiss
There is another technique I have used, where you don't need extra html, but mostly css. Basically make every tag of the table display block and width 100%. You can use data attribute for the label and then use css content to the that value as a label.
Ah nice, interesting!
Hey, I really liked the idea of the card layout for smaller screen sizes. It looks clean and easy. But I have a request for you. Can you create a new video as a follow up on this video which includes a big table (more data) where let's say you limit the table to view 5 cards or rows at any screen size, then have Pagination and select/filter capabilities (of course no need to make the filter capabilities functional, just from the UI perspective). Basically I am struggling a bit to see how can I implement pagination table features with the card layout.
Simon, can you teach how to do that if i use table component from ShadCn UI?
what' font are using in editor?
Dank Mono!
❤
❤❤
can you make it paginable?
What is the font theme you use?
Theme is Night Owl, font is Dank Mono
What font is he using on his code editor
Dank Mono 💫
I thought there will be a link to the repo in the video description :(
Cannot share this code as it is using Tailwind UI components
@@simonswiss fair enough
OMG Thank you SO MUCH! I think this is my very first donation ever - you rock!!
U-A-U
where is the code?
Can't share it because it's using paidTailwind UI components.
Hiding any data including truncate on mobile is a bad idea. Truncate is only suitable for an exerpt with read more link
That's fair enough, valid comment!
In "Stacking columns" and "Alternative layout" solution. You used duplicate content. So I think is not an option at all. And that's why people using css tricks. Because of it. Do not duplicate content or functions or your self, that first what you are learning in the early development.
Setting a block of HTML to "display: hidden" removes it from the accessibility tree, so there is no real duplication in the semantics of the document, if that's what you're worried about.
It's all trade-offs of course, but honestly I don't think that toggling between two chunks of HTML for mobile and larger screens is a big issue.
Isn't it just easier and better to just use a list of cards on mobile.
Yes, and this is the last solution presented in the video!
@@simonswissO yeah hadn't watched the last part. Thanks
Just style table as grid on small screens, no need extra dublicate html tags…
Would love to see an example of that!
why did not you write any article on your blog since 2018 ???????????????!!!!!!!!!!!
Haha this is an extremely good question! I... don't have a good answer for it 😅
My recommendation is to... Not make tables from scratch with HTML table elements. For simple use cases, sure but once you need performance and functionality, just use a library like Ag Grid or Tanstack table. There is a reason all the popular table libraries dont use HTML table elements, it's because they are notoriously difficult to use effectively and often confusing and unpredictable.
Ooof, truncating the name and email without the ability to view the entire value on smaller screens is just bad, table becomes completely unfit for the job it's supposed to do for the sake of looking pretty. Data is more important than design and always will be. As a user or admin I'd rather have the email wrap mid-text to an extra line, ellipsis on crucial data just enrages me. Like there's this food delivery app that truncates names of meals on mobile and some restaurants have pretty long food names, the ellipsis means I can't tell if the meat is with potatoes or rice. They lose far more business than if users were nitpicking the page not flowing properly.
That's a good point! One more reason for changing the layout to something a bit more accommodating - instead of making the table less usable.
Vertical tables are the REAL solution so you don't hide anything! You can shift from horizontal to vertical tables based on breakpoints (mobile vs desktop). I wrote a tool that does this using very little css and very little JS by leveraging data-attributes on all the cells (TD). I'm sorry but hiding data is not a solution. Vertical table are the answer for small screens. I appreciate what you're shooting for but CSS and JS can do this dynamically.
Yep, they are another great way to approach this, indeed!
CSS is a curse.
And a blessing!
Tables are an anti-pattern and designers should stop using them as a crutch in their designs. In my experience, cards are a much more universally useful way of presenting data that works on any screen size and allows for non-tabular data like images to be displayed.
I fully agree with you! That said I personally don't build many SaaS Admin UIs - that's typically where you find nothing but forms and tables!
Not agree, for many use cases tables are still a great way to represent data. Like products in inventory, users and schedules in a calendar. The other reason why tables are still popular is because of csv files. Most users can understand data in table easily because they are used to read excel files.
@@sanan4liYou can represent all of that using card layouts. A calendar is not a table at all; it's a linear set of events that can be grouped by day, week or month. That's why most calendars turn into an "itinerary" view with cards on smaller screens. Further, using a table to represent a calendar is a bad idea since elements spanning cells is clunky.
@@sanan4li Also, if the best your UI can do is emulate a CSV file, that's a pretty bad UI. Organize your data into a proper hierarchy and present it on cards.
For example, contacts. Sure, you could put them all into a grid, but now important details may fall off the side of the screen. What if you want a photo? Now the rows are going to be way taller, even to display a thumbnail of the user. What if you move some of those off screen details into the empty space in the taller rows? You've just made a card.
Don’t agree on that aswell. Especially on data heavy listings, where we need to grasp and identify differences in many properties tables are the way to go. Cards are visually more interesting, but blow up the available place for the data. Even with more options to filter and sort the cards, it’s easier to compare tabular numbers in tables when they are below each other
My favorite way to deal with this issue:
Go to landscape mode for a functioning table, thanks.
Just throw these bad boys wherever you have a table, easy fix 😎
First I read "Go to a desktop computer to see more content" 😅 but yeah, landscape width buys you some space, good idea!
max-w-0 and max-w-none is breaking my brain. Great video!
Breaking so hard this comment showed twice!