How To Make Responsive HTML Tables

The beloved HTML table is one of the oldest elements on the web and one of the most used elements. It's incredibly important, for a number of reason which I'll cover down below. And sadly, it doesn't get the attention it deserves and I think it's a bit outdated by today's mobile-first standards.

Why is it important

There are a number of reasons why tables are important in this day and age, even if for the most part we don't normally notice that they're there. For one, tabular data has been around for thousands of years, so it's ingrained into our society at this point. When you click on Invoices for example on a website, you expect to see, a table. Of course. And for the most part you do. It's as basic a 1 to 1 representation of data that we can get to fit on viewable area. So I applaud you table, for all your efforts.

But equally as important is it's role in accessibility. A well formed table is invaluable to someone without the capability to see what's on the screen. Screen readers can navigate the cells and rows pretty efficiently. This opens up technology to more and more people worldwide, which is awesome. So again, the table is very important.

But it fall short

If there's one thing that I've battled with quite a few times during the past few years however, its table responsiveness. Normally this isn't a problem. Normally. But more so now than before, people really like tables. Love them. Columns to be in fact. And they love adding more each and every day. And by the nature of the table, it tends to normally expand in a horizontal position the more data points it needs. And that's a problem when we have limited screen real estate.

It's a problem because from a technical standpoint there's only so much that you can do, and unlike other webpage elements, tables do not tend to favor breaking into a newline.

But they do favor scrolling fortunately, just not by default on most browsers. Come on browsers. Time to step up that game. Scrollbars alleviate some of that stress for sure. But even then it's not a natural process for the table. Normally, having a well scrollable table comes down to wrapping inside of a div with overflow enabled and certain dimensions given.

<div style="width:400px;height:400px;overflow:auto;">
<table>

</table>
</div>

So that works and it's how it's been working for quite some time now. Sure we can make the table look a little prettier too with a few frameworks added into the mix, but the functionality essentially stays the same. Even the best of the frameworks rely on this parent-div-overflow pattern. Or they rely heavily on JavaScript to essentially rebuild the table into a more readable format. Which is difficult, because we don't want our tables to lose their accessibility functionality.

And unfortunately, scrolling also has its limitations. Many many limitations.

• Not mobile friendly
• Horizontal scrollbar is way down on the page with large datasets
• Vertical scrollbar is way up on the page
• Headers are usually not visible

Not mobile friendly

Scrollbars on mobile do not make "mobile-friendly" I'm afraid. It won't break your website for sure, but it doesn't make it any friendlier to view datasets. Mobile friendliness normally involves making a webpage more usable on a mobile device, not more bearable.

Horizontal scrollbar

Once our page hits a certain number of records, we can say goodbye to our horizontal scrollbar as it will get pushed to the bottom of the page. And on both mobile/desktop this dance of scrolling down to scroll left/right gets tedious fast. We can offset that by setting a short height on our parent div, but on a mobile device this isn't perfect and we'd have to account for the many different resolutions.

Headers

Any scrolling vertically will undoubtedly involve hiding some headers for some time. And then scrolling back up to glimpse and memorize, before jumping back down again.

Without JavaScript, it's pretty much impossible to render a large dataset with many columns on a mobile device, and even on a desktop device. So what do we do.

Unfortunately, there isn't much that we can do at this time without some heavy JavaScripting. And I'd wager that most people wouldn't spend the time and effort just to get a 'better table'. I've spent that time before on a clients project, and hundreds of lines later, it kind of sort maybe worked sometimes. But hopefully the future looks brighter for our dear table friend.

Possible Solution

If you read my rant on the Loading Icon, life saver and life giver, then you'll know what I mean next. Maybe we shouldn't do anything. Maybe it's time for a new specification for our beloved table to come through and help us out a bit. It wouldn't require much work from the browsers point of view.

• Autoscroll
• Lock headers on scroll

Two very simple, yet two very important things that right now are as tedious as adding a Loading Icon if we were to do them ourselves. And it's not just about the work that will be saved, but also the more ingrained in the browser it is, the less modifications are required from a development point of view, which is great for keeping accessibility alive and well.

Something different

Another problem is that no matter what solution I personally try to think of, it usually comes back to the same thing. Tabular data. And that's why it's difficult. It's like taking a pizza and trying to make a cake with it. It's already a pizza. It needs to be taken apart first, and reconstructed in order for that to work.

So maybe it's time we take a step forward and think of the next big thing. Maybe it won't resemble a table at all. Maybe it'll be circles. But maybe it'll make sense. Until that time though, let's show some much needed respect to the table, for all the great work that it continuous to do.