JULY 11, 2017 // By James Barrett
Responsive web design has made it simple for developers and designers to realize optimized layouts for multiple screen sizes using one code format. A lot of components are well suited for this dynamic style, but when it comes to data tables—specifically ones with large amounts of data—providing an optimal user experience on smaller screens proved difficult.
Not any more!
Thanks to some clever CSS, large data tables can easily be formatted for smaller screens, giving users an excellent mobile experience without sacrificing the ability to view all of the relevant data. I will be demonstrating two examples in this article, complete with code examples, as well as why these formats are best suited for your mobile data table needs.
First things First: The HTML
Below we have a basic table, with a number of columns. For the live examples the row data will be duplicated, but this gives us the general layout of most tables, including a header, multiple columns and rows. A rendered version can be seen here.
An HTML table with truncated data.
Option 1: Card Format
This first option is great for user data, and borrows heavily from Google Android’s “Material Design” guidelines. On smaller screens, the tabled data will display as separate cards, repeating the header titles on each line for consistency. Accomplishing this effect relies on two things: The HTML 5 data- tag, and the CSS :before pseudo class. The first thing we do is add the data- tag to all of the corresponding <TD> tags:
An HTML table with the data- tag populated
In this static example I have manually copied the header titles into the data- tag. If you wanted to apply this to a more dynamic data table, you could write JavaScript that auto populates this tag with whatever is present on the corresponding header.
The next step is applying CSS to the table so when it’s viewed at smaller resolutions, the format changes. We do this using media queries:
A lot of this code is used for formatting and creation of the card, however the most important part is right here:
The CSS pseudo class ( :before ) allows for formatting to occur prior to any content that’s located within the div that the class is applied to. By using the content property and referencing the data-label we created above, we can call the header tags into the table data tags and keep them on a horizontal access repeating them wherever the corresponding data is.
From there, we hide the original table header, apply some formatting to the cells, including padding to rows, and voila—responsive cards! See a working example here.
Option 2: Pivot Table
While option one would be great for small bits of user data, no one would want to scroll through hundreds, or even thousands of records in that format. For those instances, I recommend the use of the pivot table. Using the same sample code as above, we apply the following CSS:
The key properties here are taking the table body (tbody), fixing the width to the designated resolution (max-width:800px), displaying the header information in a vertical list while fixing it to the left, and letting the corresponding data flow underneath it. A working example can be viewed here.
There are many other ways to format tables responsively, and a lot of great examples on the web. These two examples are based on Responsive Table Demos, but check out Tablesaw for some unique flavors as well. Find out what works best for your current project and keep experimenting!