respontable.js

A simple responsive table jquery plugin


Just insert a css class name, easy to adopt responsive to your table,
5 different types of responsive mode for your table.

Demo

Responsive table will be triggered within 768 pixel screen width in this demo.

1. X Scroll ( .table-xscroll )

✔col span
✔big table
✔more than 3 rows
✔comparison
✔save space

❌full view

Options iPhone 8 iPhone X iPhone XS iPhone XR iPhone XS Max iPhone SE
(2nd generation)
iPhone 11 iPhone 12 Responsive Table jQuery Plugin
Chip A11 A11 A12 A12 A12 A13 A13 A14 Responsive Table jQuery Plugin
Display 4.7" Retina 5.8-inch (diagonal) all-screen OLED Multi Touch display
Responsive Table jQuery Plugin
6.1" LCD 6.5" OLED 4.7" LCD 6.1" OLED 6.1" OLED Responsive Table jQuery Plugin
Camera 12MP camera Dual 12MP Dual 12MP 12MP camera Dual 12MP Single 12MP Dual 12MP Dual 12MP Responsive Table jQuery Plugin

2. Dropdown ( .table-dropdown )

✔big table
✔more than 3 rows
✔save space

❌col span
❌comparison
❌full view


Options iPhone 8 iPhone X iPhone XS iPhone XR iPhone XS Max iPhone SE
(2nd generation)
iPhone 11 iPhone 12 Responsive Table jQuery Plugin
Chip A11 A11 A12 A12 A12 A13 A13 A14 Responsive Table jQuery Plugin
Display 4.7" Retina 5.8" OLED 5.8" OLED 6.1" LCD 6.5" OLED 4.7" LCD 6.1" OLED 6.1" OLED Responsive Table jQuery Plugin
Camera 12MP camera Dual 12MP Dual 12MP 12MP camera Dual 12MP Single 12MP Dual 12MP Dual 12MP Responsive Table jQuery Plugin

3. Two Columns ( .table-twocol )

✔big table
✔more than 3 rows
✔comparison
✔full view


❌col span
❌save space

Options iPhone 8 iPhone X iPhone XS iPhone XR iPhone XS Max iPhone SE
(2nd generation)
iPhone 11 iPhone 12 Responsive Table jQuery Plugin
Chip A11 A11 A12 A12 A12 A13 A13 A14 Responsive Table jQuery Plugin
Display 4.7" Retina 5.8" OLED 5.8" OLED 6.1" LCD 6.5" OLED 4.7" LCD 6.1" OLED 6.1" OLED Responsive Table jQuery Plugin
Camera 12MP camera Dual 12MP Dual 12MP 12MP camera Dual 12MP Single 12MP Dual 12MP Dual 12MP Responsive Table jQuery Plugin

4. XY Swap ( .table-xyswap )

✔comparison
✔save space
✔full view

❌col span
❌big table
❌more than 3 rows

Options iPhone 8 iPhone X iPhone XS iPhone XR iPhone XS Max iPhone SE
(2nd generation)
iPhone 11 iPhone 12 Responsive Table jQuery Plugin
Chip A11 A11 A12 A12 A12 A13 A13 A14 Responsive Table jQuery Plugin
Display 4.7" Retina 5.8" OLED 5.8" OLED 6.1" LCD 6.5" OLED 4.7" LCD 6.1" OLED 6.1" OLED Responsive Table jQuery Plugin

5. Fixed 1st Column ( .table-firstcol )

✔col span
✔more than 3 rows
✔comparison
✔save space

❌big table
❌full view


Options iPhone 8 iPhone X iPhone XS iPhone XR iPhone XS Max iPhone SE
(2nd generation)
iPhone 11 iPhone 12 Responsive Table jQuery Plugin
Chip A11 A11 A12 A12 A12 A13 A13 A14 Responsive Table jQuery Plugin
Display 4.7" Retina 5.8" OLED 5.8" OLED 6.1" LCD 6.5" OLED 4.7" LCD 6.1" OLED 6.1" OLED Responsive Table jQuery Plugin
Camera 12MP camera Dual 12MP Dual 12MP 12MP camera Dual 12MP Single 12MP Dual 12MP Dual 12MP Responsive Table jQuery Plugin

Usage

First, include the 'respontable.css' and 'respontable.jquery.min.js' files in your webpage.

<link rel="stylesheet" href="respontable.css" type="text/css"/> <script src="respontable.jquery.min.js"></script>

Second, initial respontable.js with a trigger breakpoint (such as 768) in your webpage.

<script> respontable(768); </script>

Finally, insert the responstable CSS class you want in your table, that's it !

<table class="table table-dropdown">
   <tr>
       <th>Options</th>
       ...
       ...
       <td>6.1" OLED</td>
   </tr>
</table>

Download

The respontable jquery plugin is free to use for personal or non-profit usage. You can purchase a license if you want to use it in a commercial project (including plugins, themes and templates you plan to sell).

Before purchasing a license, please make sure the plugin is suitable for your project. You can do this by downloading the free version and purchasing a license later on.

Single website license

$2

Future updates
1 Commercial project

This license allows the respontable jquery plugin to be used by you or one client, in a single commercial end product

Multiple website license

$9

Future updates
Unlimited commercial projects

This license allows the respontable jquery plugin to be used by you or your clients, in an unlimited number of commercial end products.

respontable.js - Responsive table jquery plugin

Paid plugins, themes and templates

By purchasing ONE "Multiple websites license", you are allowed to include the respontable jquery plugin in ONE product (for example a plugin, theme or template) for sale. Customers and users of your product do not need to purchase their own license.

Free Download (4.41KB)

for personal or non-profit usage

Browser Support

The respontable jquery plugin targets modern browsers that support ES5, meaning Internet Explorer 10 and earlier are not supported.