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:

  1. Responsive Design Pattern - Horizontal Scrollbar [View Demo]
  2. Responsive Design Pattern - Header Selection [View Demo]
  3. Responsive Design Pattern - Fixed Headers + Expand [View Demo]
  4. Responsive Design Pattern - Fixed Left Header + Scroll [View Demo]
  5. Responsive Design Pattern - Table Reflow [View Demo]
  6. 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.
The selection of your responsive pattern parameters in translated into header row cell class specification, so if your table has more columns than the number you can specify via the rule form (e.g. 5 columns), you can apply the classes manually in the produced HTML code. For instance, for the "Header Selection" pattern, if the 3rd column (Wind (m/s)) is set to optional, then the HTML source code will be similar to: 
<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.
If you want to make responsive an existing table, you can simply reTabulize it and apply a ruleset with a table responsive rule.