Simplest jQuery Responsive Table Solution - respTables

File Size: 4.44 KB
Views Total: 3436
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simplest jQuery Responsive Table Solution - respTables

Yet another jQuery & CSS3 based responsive table solution that makes your html table with multiple columns more readable in small screens.

How to use it:

1. Download and put the jQuery respTables.js script after you've loaded jQuery JavaScript library.

<script src="//"></script>
<script src="respTables.js"></script>

2. Wrap your html table into a DIV element named 'tableWrapper'.

<div class="tableWrapper">
        <th> Heading 1 </th>
        <th> Heading 2 </th>
        <th> Heading 3 </th>
        <td> 11 </td>
        <td> 12 </td>
        <td> 13 </td>
        <td> 21 </td>
        <td> 22 </td>
        <td> 23 </td>

3. The required CSS styles and CSS3 media queries.

.tableWrapper {
  float: left;
  width: 100%;

.tableWrapper table { width: 100%; }

.tableWrapper table td:before { font-weight: bold; }

.tableWrapper table th {
  border-bottom: 1px solid black;
  padding: 5px;

.tableWrapper table td {
  padding: 5px;
  text-align: center;
@media all and (max-width: 768px) {

.tableWrapper table th { display: none; }

.tableWrapper table td {
  width: 50%;
  padding-left: 50%;

.tableWrapper table td, .tableWrapper table tr { display: block; }

.tableWrapper table td:before {
  content: attr(data-before);
  border-right: 1px solid black;
  width: 50%;
  position: absolute;
  left: 0;

4. Call the function on the table wrapper and the plugin will convert the html table into a 2-column horizontal table layout in mobile view (screen size < 729px).


This awesome jQuery plugin is developed by vaskort. For more Advanced Usages, please check the demo page or visit the official website.