O'Reilly logo

Responsive Web Design with jQuery by Gilberto Crespo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Stackedtables

Stackedtable is a jQuery plugin that offers another option for our responsive table which is available to download from http://johnpolacek.github.io/stacktable.js/.

This solution creates a copy of the table and converts wide tables into a two-column key/value format that works better on small screens.

Tip

This solution is recommended for tables with few rows only because it increases a lot of the vertical content.

By using a simple media query, we can hide the original table and show the stacked table. Let's take a look and see how we can put this into action.

How to do it using the table from the previous example

We will start by including the CSS stylesheet inside the <head> tag:

<link href="stacktable.css" rel="stylesheet" />

If we want ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required