Table-shrinker is a jQuery plugin, that makes responsive html tables. Wide/large HTML tables fully responsive across all devices/platforms!
Make responsive HTML tables across browsers and devices
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
– It has highly customizable page-breaks
– It Won’t break your table’s primordial design, it uses css only to re-structure table for mobile
– It’s Designed to attend fat-fingers concept to prevent missclicking, you can tap anywhere in the row and it will trigger the collapser
– You can maintain all previous functions working anywhere inside the elements of the table. (ie: a dropdown in table headers)
– It’s free, it’s fast and it’s lightweight
– I think it’s unique… I couldn’t find another plugin in the web which support nested tables. (ie: tables within tables)
– It does not support irregular headers. (ie: vertical headers)
– It does not support multiline headers
– It does not support colspan attr
First, add shrink class to the table you want to be shrinked
Next, start the plugin right after the DOM finished rendering
Strictly Necessary Cookies
Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.