10+ Solutions for Responsive Data Tables

Having trouble fitting your tables into a responsive site? They look great on a desktop layout, but look miserable on mobile.

Here I will show a basic solution I have used, followed by a list of other plugins and tools you might want to use.

Retro-fitting Old Table Markup

First remove any fixed widths from your HTML.

Before:

 <table width="540">
  <tr>
    <td width="300">Header 1</td>
    <td width="60">Header 2</td>
    <td>Header 3</td>
    <td>Header 4</td>
  </tr>
</table>

After:

 <table>
  <tr>
    <td>Header 1</td>
    <td>Header 2</td>
    <td>Header 3</td>
    <td>Header 4</td>
  </tr>
</table>

The width attribute is deprecated – better to let the browser size the columns. If you don’t know much about tables, have a read through this massive guide to tables at CSS-Tricks.com.

Basic CSS Styling

First add some padding and borders.

table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #bbb;
}
td, th {
    border-top: 1px solid #ddd;
    padding: 4px 8px;
}

Then maybe some striped rows.

tbody tr:nth-child(even) td {
    background-color: #eee;
}

Adapting to Mobile-sized Layout

As the viewport gets smaller, the table width will shrink. However depending on how many columns you have – the table which reach a minimum size. By default, the browser will wrap text in each cell, but on a small width the table will not fit, and the table will extend out to the right of the viewport.

A Quick Hack

If you have a large site and you cannot fix each table, you could allow the table to horizontal scroll, without breaking your layout. In the CSS set the table to display:block; and set overflow-x: to auto; – You may want to use a media query to only do this for small devices.

@media screen and (max-width: 640px) {
	table {
		overflow-x: auto;
		display: block;
	}
}

Note: It’s better syntax to wrap the table in a DIV that has overflow-x: scroll; – but this means changing each table in your site.

Here’s what we get (this is the amount of caffeine in Starbucks coffee via Caffeine Informer). Note that if you have a table that has only a few columns, display: block means they will not resize fit across the full width of the table (if the table is set to 100% width).

DESKTOP

MOBILE (scroll to the right)

This is what happens in mobile (320px wide). The user can swipe right and left to horizontal scroll the table.

The trouble is, the user has no indication that they can swipe to the right.

A Better Solution

If you resize this page (or you are viewing it on a mobile device), you will notice the tables will convert to a mobile optimized version (as in the image below).

Here, I’ve combined the table cell data with its column header.

Now to other much more powerful options…

1. Footable – jQuery

This excellent plugin allows will hide columns of your choosing. When the row is clicked (or tapped) the columns will fold out below the row.

I’ve used an early version of this on Caffeine Informer, and it works well. More recent versions have substantially more features added.

1. Give your tables the appropriate data attributes (which columns should be hidden by default).
2. Ensure the breakpoints are correct (default 480px and 1024px).
3. Call the footable() function for the appropriate tables.

Source
Demo and Docs

 2. Foundation Zurb – Lock first column

The solution from the Zurb framework is to lock or pin the first column and make the rest of the table scrollable.

To accomplish this they use a small piece of jQuery to manipulate the DOM, and some CSS.

Demo

Also see an interesting tutorial on how to add visual cue when the table is going to scroll: design4lifeblog.com/responsive-tables/ — site seems to have disappeared – James.

3. Stacktable

This piece of jQuery will take a table and turn it into one long column of data.

Demo
Source

4. Responsive Tables

This rather intriguing jQuery script will scale font size of the table according to data attributes.

In the above example, the table tag contains two attributes data-max="30" and data-min="11" indicating a minimum and maximum pixel font size.

Demo

5. Filament Group – Tablesaw

This jQuery solution offers all kinds of different options for table display.

From selectable columns, to swipable columns. As well as prioritizing columns.

There’s a lot of different options in their github repository. This is truly the kitchen sink of responsive tables.

Source and Demo

6. TablePress – WordPress

TablePress is a WordPress plugin that utilizes the powerful DatatablesjQuery plugin. Datatables is one of the most feature-rich plugins for tables (sorting, filtering, paging, etc).

TablePress has a responsive extension which turns the table on its side, locking the header column in place. Datatables.js is very powerful, but does add considerably to page weight.

Demo
Responsive Extension

7. ngResponsiveTable

This small jQuery script will turn each row into its own vertical list. Rather than manipulate the DOM (by adding and removing table cells), it puts the header info as a data attribute (data-content) into each td element. The stylesheet then displays this using content: attr(data-content). Quite a clever idea.

Tutorial
Demo

8. Codepen by Charlie Cathcart

This clever example uses CSS to accomplish the save as previous but without any JavaScript.

Demo: Codepen

9. Codepen (Dudley Story)

This uses a short (non-jQuery) Javascript to create data attributes into table cells. Then utilizing a CSS media query takes the attributes to format a mobile display.

Nice work.

Demo: Codepen

10. Codepen (Geoff Yuen)

No Javascript, but requires data attributes to be entered into each cell.

Demo: Codepen