Search⌘ K

Hide Columns on Mobile

Explore how to make your application tables mobile-friendly by hiding unnecessary columns with Tailwind's responsive utility classes in Thymeleaf. This lesson teaches you how to apply conditional CSS classes to ensure your data displays effectively on smaller screens, improving usability on mobile devices.

We'll cover the following...

The menu on the left collapses into a hamburger menu on mobile, but our table keeps showing the four columns (+1 for the edit links).

If we only want to keep the Name and Edit columns, we should hide the other columns using ...