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?
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.