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.
We will start by including the CSS stylesheet inside the <head>
tag:
<link href="stacktable.css" rel="stylesheet" />
If we want to change the breakpoint, aiming to use this solution for Smartphones, we only need to go inside the stacktable.css
file and change the max-width
property:
@media (max-width: 480px) {
.large-only { display: none; }
.stacktable.small...