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.

The Basics

First remove any fixed widths from your markup.

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.

Basic Styling

First 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 some striped rows (nth-child is not supported by IE8).

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

Mobile-Friendly Table

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. This will probably wider than a mobile viewport, and your layout will be broken.

You could allow the table to horizontal scroll, without breaking your layout. First we have to change the display: to block; and set overflow-x: to auto; – You may want to use a media query to only do this for small devices.

Note: It’s better syntax to wrap the table in a DIV that has overflow-x: scroll;

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

Footable – jQuery

Desktop layout

Mobile – 2nd row clicked

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.

Github: github.com/bradvin/FooTable Demo and Docs: fooplugins.com/footable-demos

Foundation Zurb – Lock first column

Desktop layout

 

Mobile – first column is locked

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: zurb.com/playground/projects/responsive-tables/index.html

Stacktable

 

Desktop layout

Mobile – everything is one column

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

Demo: johnpolacek.github.io/stacktable.js/ Github: github.com/johnpolacek/stacktable.js

Responsive Tables

Desktop layout

Mobile – Fonts are scaled

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.

Github: github.com/ghepting/jquery-responsive-tables Demo: garyhepting.com/jquery-responsive-tables/

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.

Github: https://github.com/filamentgroup/tablesaw

TablePress – WordPress

Desktop layout

 

TablePress is a WordPress plugin that utilizes the powerful Datatables jQuery 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.

TablePress Demo: tablepress.org/demo/ Responsive Extension: tablepress.org/extensions/responsive-tables/

ngResponsiveTable

Desktop layout

 

 

Mobile – data is presented vertically

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.

Article: netgenlabs.com/Blog/Responsive-Data-Tables-with-ngResponsiveTables-jQuery-plugin Demo: http://netgen.github.io/jquery.ngResponsiveTables/

Codepen by Charlie Cathcart

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

Demo: http://codepen.io/pixelchar/pen/rfuqK

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.

Demo: http://codepen.io/dudleystorey/pen/Geprd

Codepen (Geoff Yuen)

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

More libraries and articles

• WP Data Tables – A powerful plugin for WordPress that does all kinds of things.
• Flip the table orientation – example code on Codepen.
• Make the headers on slant – Chris Coyier shows how to format tables with really long column headers.
• Responsive Pricing Table – Not about data tables, this tutorial shows how to adapt a pricing table to a mobile viewport.