Strategies To Handle Tables On Mobile Screens
When I started to work as a web developer, tables on mobile screens was something I always had to take into account the product of my company had a lot of them. They wanted to have a responsive platform but showing a lot of information on each table. They wanted everything.
Table Of Contents
Using Scroll
Do Not Show Everything
A Different Approach
Final Thoughts
Using Scroll
It was my first job as a web developer so instead of looking for options on Stack Overflow or similar, I tried to reinvent the wheel. They wanted to display a lot of columns, and the view was terrible on mobiles. Everything was overflowing and being hidden due to the small width of the viewport.
My first approach was to add a horizontal scroll on the table so I could move the table horizontally and see all the content. I think this one is the easiest approach and the fastest to apply. I only had to add overflow-x: scroll (among other small adjustments) to my table.
table {
display: block;
overflow: scroll;
}Then I could scroll the table with my finger and everything was perfect. It was perfect until I had to work with a huge admin table with a lot of columns. Then I decided to change my strategy.
Do Not Show Everything
It was an admin table which was used by us to change the configuration of our users. The people responsible to do these changes wanted to see all the information of the user to be able to respond to each support ticket with as much accuracy as they could. They wanted to do it on their mobile phones as well, so they could reduce the response time to the user and make them happier 🙂
It made sense, but I couldn’t display everything on mobile because it was crazy to navigate in that situation moving my finger. I decided that the solution was to hide some columns. After a meeting with the support team, we realized that they only needed some specific columns. Instead of adding a horizontal scroll again, I decided to hide the unnecessary columns to avoid distractions. Some media queries and display: none and I got it.
A Different Approach
Some years later, I was just playing with some mobile-first code and I decided to convert an accordion to a table. So I realized that this could be another great alternative to the tables problem on mobile screens. So, instead of hiding columns or using a scroll, you can just convert the table into another (and completely different) element.
Final Thoughts
There are a lot of ways to handle the problem with tables on mobile devices but sometimes the best way is to be creative. However, be careful about reinventing the wheel because it can be sometimes risky. We have seen some alternatives but this is more like art so feel free to share your ideas as well. They are more than welcome!
Happy coding!
