Responsive Table

With the improvements in the widget API in EverWeb V2.1.0, tables are fairly easy to create using the widget Assets List.
Using the Full Width control and setting a maximum with wider than the content area, tables can also be made responsive. The problem is that, as the viewport width is reduced, the table - and each cell - is reduced in width and the content will wrap - unless "no-wrap"e has been specified in the styles.
Continuing to reduce the viewport width will eventually break the table. How do we display data in a table on a fully responsive page - or on the mobile version of the website - when the screen width is too narrow to display all the cells in line?

CSS Solution

Although there are a number of javascript and jquery solutions out there, it is much better to avoid the use of unnecessary scripts when dealing with designs for mobile devices. The solution used here is based purely on CSS for greater efficiency in terms of saving the mobile visitor's data allowance and extending the battery life of their device.
In CSS3, media queries are used to change the page layout at a certain viewport widths. This is how layouts are able to respond to the size of different devices. The "Break Point" at which this occurs is set so that the layout changes before the table itself breaks and becomes unreadable.
This particular solution turns each row of the table into a mini table in its own right when viewed on mobile devices. This is achieved by forcing the table cells to display like block elements and then adding a label to each data block using text content generated using the CSS :before selector.
If all this is above your pay grade, don't worry. EverWeb's excellent widget API does all the heavy lifting.
Note that there is a checkbox to make the table sortable by clicking the headers. This function is not available once the table switches to the mobile configuration.
If viewing this page on a computer, reduce the browser width or use the browser's responsive mode to see the layout changes.
NOTE: This text is displayed using the Responsive Scroll Box widget. It has responsive width and fixed height so that it can be used in both the full site and the mobile version. As the viewport width reduces, the content becomes scrollable.

EverWeb Widgets Subscribers
Arnold ArmstrongEWSN-001903/01/
Herbert HanleyEWSN-000702/01/
Julia JonesEWSN-001102/016/
Sarah SmithEWSN-000601/01/
James BaileyEWSN-010312/07/
David BondEWSN-000712/02/
Raymond LennoxEWSN-012311/23/
Ed McBainEWSN-004611/15/

© EverWeb Widgets

EverWeb Widgets