Make HTML Table Responsive Across All Devices - jQuery table-shrinker

table-shrinker is a jQuery based responsive table solution which makes wide/large HTML tables fully responsive across all devices/platforms. Licensed under the GPL-3.0.

The table-shrinker plugin automatically shrinks specified table cells into a toggleable panel on small screens so that your users are able to show/hide the table cells when needed. 

1. Add responsive breakpoints to table cell using the following CSS classes:

• shrink-xs: 480px
• shrink-sm: 768px
• shrink-md: 992px
• shrink-lg: 1200px
• shrink-xl: wider than 1200px
• shrinkable: makes text responsive

<table class="table">
  <thead>
    <tr>
      <th> User-ID </th> <!-- never shrinks -->
      <th class="shrink-xs"> Age </th>
      <th class="shrink-xs shrinkable" > Full Name </th>
      <th class="shrink-md" > Company </th>
      <th class="shrink-lg" > Contry </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> #0001 </td>
      <td class="shrink-xs"> 27 </td>
      <td class="shrink-xs shrinkable" >  Maria Anders </td>
      <td class="shrink-md" > Alfreds Futterkiste </td>
      <td class="shrink-lg" > Germany </td>
    </tr>
    <tr>
      <td> #0002 </td>
      <td class="shrink-xs"> 33 </td>
      <td class="shrink-xs shrinkable" >  Francisco Chang </td>
      <td class="shrink-md" > Centro comercial Moctezuma </td>
      <td class="shrink-lg" > Canada </td>
    </tr>
    ...
  </tbody>
</table>

2. Load jQuery library and the jQuery table-shrinker plugin at the end of the document.

<link href="jquery.table-shrinker.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="jquery.table-shrinker.js"></script>

3. Call the function on the HTML table and done.

$(function(){
  $("table").tableShrinker()
});

4. Make the HTML table zebra striped. Default: true.

$("table").tableShrinker({
  useZebra: false
})

5. Use Intersection Observer API to update the zerba striped rows & columns. Default: true.

$("table").tableShrinker({
  useObserver: false
})

6. Enable/disable smooth transitions when toggling the table.

$("table").tableShrinker({
  useTransitions: true,
  transitionSpeed: 300
})

7. Enable/disable the toggle button.

$("table").tableShrinker({
  showToggler: true,
  customToggler: ['<span>+</span>','<span>-</span>']
})

8. Ignore specific elements.

$("table").tableShrinker({
  ignoreWhenHit: 'button, a, .btn'
})

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