Tables are an important part of HTML. Although they were often used in the past for layout, today they’re mainly used for marking up data. Since the adoption of responsive web design, various approaches have been developed for establishing tables that can scale well in different viewport sizes.
The Basic Markup for Our Table
Before diving into the core methods, let’s have a look at the example table that will be used throughout this article to demonstrate the different methods for achieving responsive tables:
<table summary="Example table"> <caption>Example Table Caption</caption> <thead> <tr> <th>Country</th> <th>Languages</th> <th>Population</th> <th>Median Age</th> <th>Area (Km²)</th> </tr> </thead> <tbody> <tr> <td>Argentina</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> <!-- more rows here... --> </tbody> <tfoot> <tr> <td colspan="5"> <!-- content here... --> </td> </tr> </tfoot> </table>
Note that with the exception of the Foundation example, the styling of this table will be based on Bootstrap’s table styles.
Let’s now get familiar with different techniques for building responsive tables.
To create a responsive table with Bootstrap, you have to wrap the table inside a
div element with a class of
table-responsive. By default, Bootstrap applies the
overflow-x: auto property to this wrapper element. When the browser window is less than 768px, the
overflow-y: hidden property is applied. Therefore, on small devices you can see the contents of your tables by scrolling horizontally.
The following screenshot demonstrates what’s described above:
Foundation provides an interesting way for creating responsive tables. As you can see in the next screenshot, on small devices (<767px) the first column (i.e. Country) is pinned to the left of the table, while the other ones are horizontally scrollable:
responsive class to your tables.
Stacktable.js is a jQuery plugin that changes the layout of your tables on small screens. Depending on the browser viewport, it toggles between two tables, the original table and a copy of it. The latter is a key/value table, where the key is a column name and the value is the row’s related value. As the following screenshot shows, this happens for all the columns except the first one:
Tablesaw is a set of jQuery plugins for responsive tables built by the Filament Group. Let’s have a closer look at some of these plugins.
Similar to, but not to be confused with the Stacktable.js plugin described above, Tablesaw offers its own implementation for creating key/value tables through a plugin called Stack Table. Here’s how it looks:
tablesaw-stack classes as well as the
data-tablesaw-mode="stack" attribute to the desired tables. When the viewport has a width less than 640px, your tables will be optimized for responsive layouts.
But Tablesaw’s plugins can do more! First, the Toggle plugin helps you select which columns you want to be visible on different sizes. The Mini Map plugin gives users a clear view of the visible and hidden columns.
Again, you have to download the necessary files (e.g.
tablesaw.bare.css). As a next step, select the breakpoints at which your columns will show. To do this, add the
data-tablesaw-priority attribute to your table headers with the desired number or keyword as the value. Here’s an example:
Finally, invoke the functionality of the plugins by setting the related classes and attributes to your tables:
<table data-tablesaw-mode="columntoggle" data-tablesaw-minimap> <!--content--> </table>
RWD-Table-Patterns is an alternative implementation of the Tablesaw approach (see previous section). In addition, it’s designed to be used with Bootstrap, but feel free to customize it for different frameworks.
Before trying to use the plugin, make sure that you have successfully added all the required dependencies to your projects. You can initialize it by setting up Bootstrap’s structure (see the Bootstrap section above) and then assigning the
data-pattern="priority-columns" attribute to the wrapper element. There’s also the option to specify the breakpoints at which your tables will be visible. To do so, add the
data-priority attribute to the table headers with a desired value. Here’s how the plugin works:
Furthermore, by default, the table headers are fixed. Minify the viewport to test it!
FooTable is another excellent solution for effectively scaling your tables across different screen sizes. It optionally provides useful add-ons like filtering, sorting, and pagination. Beyond its jQuery version, there’s also a WordPress plugin version.
As always, before using FooTable, you have to download the required files. You can do that by visiting the Footable GitHub repository.
To make that work, first assign the
data-hide attribute to the corresponding table headers with the default values (e.g.
phone,tablet) or custom keywords. The screenshot below gives you an idea of how it works.
Note also that the breakpoints are based on the table width. If you want to use the viewport width, you have to modify the configuration object.
DataTables is a well-known jQuery plugin useful to anyone who wants to work with HTML tables. Beyond its core powerful features, it provides an extension that allows you to build responsive tables. Depending on your front-end framework, different styling assets are required to integrate the plugin into your projects.
For instance, a project based on Bootstrap requires dependencies that can be found at this location. Once downloaded, you can initialize the responsive behavior by adding the
dt-responsive class to the corresponding table and calling the extension on it.
Pure CSS Solutions
- Responsive Data Tables by Chris Coyier
- Responsive Tables by David Bushell
- Creating Responsive Tables (with a Sass Mixin) by Geoffrey Rose
- RWD List to Table by Geoff Yuen
Choosing the Right Method
At this point you might be wondering which one of these techniques/plugins you should use. Well, there’s no correct answer to this question. Before deciding, you have to take into consideration different factors. For instance:
- The type of your data and its size/length. Say, for example, that you have tables with many columns. In that case, you might want to avoid having horizontal scrolling.
- Do you need a simple or a more complex solution? Are you interested in features like filtering and/or sorting?
- Is your data coming from an external data source (e.g. a web service)?
In this article, I presented different approaches you can follow to optimize your tables for small devices. I hope this helped you expand your knowledge and understanding of the solutions available. If you have ever used other techniques that I haven’t covered here, let us know in the comments below. Also, I encourage you to have a look at two other valuable resources on the same subject:
Finally, we’ve created a CodePen collection with all the demos from this article so you can check that out if you like.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Form Design Patterns