Responsive data in tables, making them work on mobile devices
Tables are a mainstay of the frontend website development; however they’re not really designed for smaller screens.
Turn back the clocks to the early 2000’s and you’ll find entire websites essentially laid out in tables, a series of nested tables that contain all the site content, images and layout. It was a difficult time for frontend development.
Not only was it extremely messy to work with, they didn’t always scale very well, or were limited in how far they could scale.
Luckily in 2026 this is a distant memory, no longer do we use tables for layout (if you are, please get in touch so we can redesign your website!). The combination of modern HTML5 and CSS makes for clean and concise markup whereby the styling and content are separate concerns, sites can adapt to device size and present an optimal view to visitors.
Tables still have their place
Yes, you’ll still find them used, they are the best tool to use for displaying what they were originally designed for, data in rows and columns. And here we come to the issue with tables and the modern web. Imagine you’ve got a modest table such as the example below:
Looks fine on desktop, all information is nicely laid out and visible, what’s the issue?
Take a look at the mockup below, this shows how the table would look using standard table styling on a mobile device. Not so good is it. You need to scroll to the right to see horizontal content, which makes for a terrible user experience.
The usual “fix” to this is to put the table in a box so that the user can swipe left and right to see the data, but this really is more of a band aid. Mobile portrait layouts should scale vertically, so what’s the solution?
Our solution is shown below, using responsive styling and a few modern CSS elements it’s possible to display this table in a manner which works far better for the mobile viewer. All information is available without a horizontal scroll, isn’t that much nicer?
It might seem like a minor thing, but little touches like this are what separates polished websites with a good user experience from websites where mobile accessibility is more of an afterthought.
Does your site have an ugly table that doesn’t work on mobile? How did your web developer tackle this? Does it scroll horizontally or (gasp) is it just hidden on mobile? Maybe they just included the data in an image so that you need a magnifying glass to see it on smartphones.
Let us know, as usual with websites, there’s lots of different ways to tackle the problem, all with their own drawbacks.