Since 2012, "Responsive Design" is a massive trend in webdesign. Websites are mainly oriented to increase the user experience on any devices. In this logic, the lightweight "Responsive Tables" plugin is designed to make "Responsive Design" any HTML / CSS table, specially on mobiles. To create this plugin, I've worked on implementation that would meet four criteria:
Doesn't break responsive layouts of the template,
Doesn't unnecessarily hide table data,
Still allows you to compare rows with a key column.
No librairy Jquery to avoid conflicts,
Most of the time, as you looked at data table, you realized that the first column is the main key. This is the reference for the other columns. I wanted my extension "Responsive Tables" to have this first column always available.
So, on mobiles devices, the head of the table become this first column (the yellow one on the picture bellow), the table "flip" on the side.
You just have to touch the table with your finger and move "right" and "left" the columns, the first one is still fix and available (see below).
To avoid always possible jQuery conflicts, "Responsive Tables" don't use this librairy.
The "Responsive Design" experience has been tested with success on iPhone, iPad, Android and BlackBerry.
Please, don't use "Responsive Tables" to display images in your content. The plugin DO NOT resize pictures. If you want/need to display images, the best design practice is using the tag < div >, tables are displaying datas.
Please, use my forum support for your questions and the JED for your reviews.
Version 2.1.0 : add some improvements in code for a better Responsive Design experience