Responsive Tables - Editor
When I first released the Joomla plugin "Responsive Tables" in 2013, the "Responsive Design" website's market was emerging. A few months later, according to the requests of my clients, I decided to increase the power of my plugin simplying it for you. In this logic, I've been worked on implementation that meet 2 criteria:
- Provide 2 ways to display your table responsively,
- Anyone should be able to use it without knowing HTML code.
First method Flip side
The first method to display the table responsively is well knowed now. On mobiles devices (under 768px), the < thead >, of the table become his first column (the yellow one on the picture bellow). The table toggle 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
Second method : Horizontal scroll
The second method to display the table responsively is a little bit different. On mobiles devices, the table scrolls horizontaly (if the table is larger than the screen).
You just have to touch the table with your finger and move "right" and "left" the columns. In this case, the table doesn't "flip" and the first column can disapear. This is different approach of the "Responsive Design" to increase the user experience.
The "Responsive Design" experience was successfully tested on iPhone, iPad, Androïd and BlackBerry.
If you want/need to display images, the best design practice is using the tag < div >. Remember, tables are displaying datas. So, please don't use "Responsive Tables - Editor" to display images in your HTML tables. The plugin DO NOT resize pictures.