Besides form fields, one of the hardest HTML elements to manipulate are tables. They are hard to style via CSS and also extremely hard to process via JavaScript.
That's why in very few Responsive Web Design (RWD) frameworks and UI kits, the table UI element is addressed and properly formatted for smaller screens.
The "Responsive tables" jQuery plugin allows developers to take a table's columns and assign them a visibility priority based on the available screen size.
So when the page is accessed from a smaller screen, only the table columns with priority will be showed, based on the screen resolution.
The rest of the columns will only be hidden, with a special selector to the top right of the table, where users can reactivate a column and hide others.
This can be very useful especially for data grids where the table contains a large amount of columns.
Responsive tables comes with support for the Bootstrap framework, a sticky table header, colspans and a special row focus/highlighting feature.
A demo is included with the download package.
Requirements:
- JavaScript enabled on client side
- jQuery
- jQuery UI
Comments not found