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

File Size: 20.2 KB
Views Total: 7073
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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. 

How to use it:

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. Enable/disable smooth transitions when toggling the table.

  useTransitions: true,
  transitionSpeed: 300

6. Enable/disable toggle buttons.

  customToggle: ["<span>˅</span>","<span>˄</span>"],
  customToggleAll: ["<span>˅</span>","<span>˄</span>"],
  showToggle: false,
  showToggleAll: false,
  iconsOnLeft: false

7. Ignore specific elements.

  ignoreWhenHit: 'button, a, .btn'

8. Force all shrinked elements to be visible on first load.

  loadCollapsed: true



  • Fix toggle button if last column is not shrinked


  • Add support for left side toggle icon


  • Added more options.


  • Add support for chained tables


  • Fix for multiple instance

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