How to make responsive an article table
With the huge market penetration of the various mobile devices (smartphones, tablets, etc) the need to adjust automatically the width and height of your site elements according the the screen size of the end user is clear. Responsive Web Design (RWD) is not a particular tool or implementation, but rather a design methodology that aims to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).
Tabulizer brings responsiveness to your tables with just a few clicks. More specifically it supports out of the box the most popular responsive design patterns for tables:
- Responsive Design Pattern - Horizontal Scrollbar [View Demo]
- Responsive Design Pattern - Header Selection [View Demo]
- Responsive Design Pattern - Fixed Headers + Expand [View Demo]
- Responsive Design Pattern - Fixed Left Header + Scroll [View Demo]
- Responsive Design Pattern - Table Reflow [View Demo]
- Responsive Design Pattern - Flip Headers [View Demo]
In order to add one this patterns to your table, you need to add a rule in an existing ruleset (i.e. table preset). The key settings for the rule are given below:
- Element: Table
- Range: all
- Table/Responsive: From the drop-down control select the pattern your prefer and the corresponding pattern parameters, if any.
Responsive Patterns Parameters
As mentioned previously, some pattern may have some optional parameters to fine tune the initial display. More specifically:
- Header Selection: A column can be set as Persist, Essential or Optional. Persist means that it never hides, therefore there is no need to be appear in the selection box. Essential is of high importance, and it's visible in smaller screen sizes. Optional means that the column can be hidden in smaller screen sizes, so initially is unselected.
- Fixed headers + Expand: The Expand identifies the key column, in which the user will click to expand the rest of the columns. Phone identifies the column that will appear both in smaller (phones) and larger screen resolutions (tablets), while Table indicates a column that will appear only in larger screens.
<table> <thead> <tr class="tabrow h100m_h2"> <td class="tabcol h100m_c1 essential persist">Rank</td> <td class="tabcol essential">Fastest time (s)</td> <td class="tabcol optional">Wind (m/s)</td> <td class="tabcol h100m_c4 essential">Athlete</td> <td class="tabcol optional">Country</td> <td class="tabcol optional">Date</td> <td class="tabcol optional">Location</td> </tr> ... </table> </thead>If I change the class name from "tabcol optional" to "tabcol essential" it will become an essential column.