Header

Main Content

Article

Managing Tables for Mobile

  1. Navigate to the page you want to create the table on
  2. Select Open Foundation Page Controls View Screenshot
  3. Select Advanced Options View Screenshot
  4. Select Manage Additional Content Area View Screenshot
  5. Create and Connect Page View Screenshot
  6. Select New - Content [Global] View Screenshot
  7. In the bottom section, select Home Welcome Content Section View Screenshot
  8. For the headline, insert what you want the header above the table to say. (this can be removed) View Screenshot
  9. Under the new section, Manage Optional Container View Screenshot
  10. Create and Connect Page View Screenshot
  11. Select New - Content [Global] View Screenshot
  12. In the bottom section, select Table View Screenshot
  13. This headline will be invisible, so naming conventions can vary
  14. Edit Mobile Table Style, can change the mobile style to either scrolling or stacked. View Screenshot
  15. Click OK to change
  16. Edit Content, normal text editor, any table content in this section will be in the mobile table style selected above.

For more information on other table customizations available through HTML, please visit the following Foundation page for reference - https://foundation.zurb.com/sites/docs/table.html.

Sample Stacked Table - Resize your browser to view


Firstname Lastname Age Dfeac Rbxv Osdfg Psdgr
Jill Smith 50 50 50 50 50
A F 44 44 44 44 44
B G 67 67 67 67 67
C H 6 6 6 6 6
D I 234 0 92 9 5
E J 24 24 24 24 24

Sample Scrolling Table - Resize your browser to view


Firstname Lastname Age Dfeac Rbxv Osdfg Psdgr
Jill Smith 50 50 50 50 50
A F 44 44 44 44 44
B G 67 67 67 67 67
C H 6 6 6 6 6
D I 234 0 92 9 5
E J 24 24 24 24 24