How to make your Tables Responsive

Recently I was working on an HTML table with a lot of columns, I thought “How is this going to look on my mobile phone?”. So then I searched for “responsive tables” and found Stackable.JS. The purpose of Stackable.JS is to give you an easy way of converting wide tables to a format that will work better on small screens. It creates a copy of the table that is converted into a 2-column key/value format.

Demo

How does it work?

On the demo, I used the cardtable method. Card table breaks each row into its own table. The row tables function like cards. Any content left in tfoot is also broken into its own card, this allows for things like view all links or pagination to be easily used.

Original:

stackable-js-demo-full-width

When screen hits 768px and bellow:

stackable-js-demo-stacked-at-768px

The Code

Simply copy the entire code to a html file then run it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.stacktable { width: 100%; }
.stacktable tr td, .stacktable tr th { border: 1px solid #dfdfdf; padding: 10px; }
.st-head-row { padding-top: 1em; }
.st-head-row.st-head-row-main { font-size: 1.5em; padding-top: 0; }
.st-key { width: 49%; text-align: right; padding-right: 1%; font-weight: bold; }
.st-val { width: 49%; padding-left: 1%; }

.stacktable.large-only { display: table; }
.stacktable.small-only { display: none; }

@media (max-width: 768px) {
.stacktable.large-only { display: none; }
.stacktable.small-only { display: table; }
}
</style>
</head>
<body>
<table id="make-responsive" class="table" width = "100%">
<thead>
<tr>
<th width="30%">Name</th>
<th width="30%">Phone</th>
<th width="30%">Description</th>
<th width="10%">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Carlo Fontanos</td>
<td>514-343-2265</td>
<td>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium</td>
<td><a href="#">Edit</a></td>
</tr>
<tr>
<td>Brad Jaymond</td>
<td>658-341-112</td>
<td>Lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram</td>
<td><a href="#">Edit</a></td>
</tr>
<tr>
<td>John Garcia</td>
<td>652-755-2322</td>
<td>Anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima</td>
<td><a href="#">Edit</a></td>
</tr>
</tbody>
</table>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://files-stackablejs.netdna-ssl.com/stacktable.min.js" type="text/javascript"></script>

<script>
$('#make-responsive').cardtable();
</script>

</body>
</html>

Do you need help with a project? or have a new project in mind that you need help with?

Contact Me