Responsive tables

A short presentation on working with tables: creating a table and then formatting it as "Responsive table"

Working with tables

If a "Table responsive" format is applied then only properties such as border and alignment are taken into consideration, the other properties being automatically set.

generic-table-3.png

Also, using "Image" menu item, an image can be added as cell content.

generic-table-4.png

If the table is "Responsive table" and it needs to have columns with same width, then one of its cells must have the "Equal width" as Class.

Other useful properties: horizontal alignment (H align) and vertical alignment (V align).

generic-table-7.png

There are three formats:

  • Horizontal: the table is read row by row (from left to right). On tablet and mobile devices, each row becomes a table.
  • Horizontal no stacking: the table is read row by row (from left to right). On tablet and mobile devices, the table is rendered as on desktop, with an additional scrollbar (if needed).
  • Vertical: the table is read column by column (from top to bottom). On tablet and mobile devices, each column becomes a table.

 

generic-table-8.png

Tablet Mobile
horizontal-table-tablet.png horizontal-table-mobile.png
Tablet Mobile
horizontal-no-stacking-table-tablet.png horizontal-no-stacking-table-mobile.png
Tablet Mobile
vertical-table-tablet.png vertical-table-mobile.png