Lightweight jQuery Based Responsive Table Solution - RTable

File Size: 3.69 KB
Views Total: 3242
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight jQuery Based Responsive Table Solution - RTable

Just another jQuery responsive table plugin which transforms a regular Html table into a single column table (or a scrolling table) when not enough space is available.

How to use it:

1. Load the jquery.rtable.css in the head and the jquery.rtable.js at the bottom of the document. Make sure you have jQuery library loaded in the document.

<link href="jquery.rtable.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.rtable.js"></script> 

2. Make sure your table have the thead and tbody tags.

<table >
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

3. Call the function on the table to make it responsive on small screens.

$('table').rtable();

4. Possible options.

// notable or flipscroll
style: 'notable',

// an array of sacrificial columns
sacrifice: [],

Changelog:

2018-09-15

  • bugfix styles for multi line headings

2016-10-11

  • Update jquery.rtable.js

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