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

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">
      <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>
      <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>
      <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>

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.


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

  useZebra: false

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

  useObserver: false

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

  useTransitions: true,
  transitionSpeed: 300

7. Enable/disable the toggle button.

  showToggler: true,
  customToggler: ['<span>+</span>','<span>-</span>']

8. Ignore specific elements.

  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.

  • Publication date: 04.04.2019
  • Source