WiscWeb WordPress - Responsive HTML Table Widths

The UW WordPress theme, by default, sets the width of all HTML tables to 100%. These widths can be overridden using Foundation's grid classes.


Step 1) Navigate to the "Text" tab of your content editor. 

Navigate to the Text Tab of your content editor


Step 2) Locate the <table> element that you would like to resize.

Locate the table element that you would like to resize


Step 3) Add a class="" attribute to the element and assign a new width using Foundation's grid classes.

 Add a class attribute to the element and assign a new width using Foundation's grid classes



Understanding Foundation Grid Classes

 

  • Foundation grid classes consist of two parts separated by a hyphen:
  1. {screen size} - {element size} 
    1. E.g. "medium-6 ": At a medium screen size the element's width is 50%
    2. E.g. "large-4 ": At a large screen size the element's width is 33%
  • Element sizes are defined along a 12 column grid:
  1. E.g. "medium-12 ":  12/12 = 100%
  2. E.g. "medium-9 ":  12/9 = 75%
  3. E.g. "medium-6 ":  12/6 = 50%
  4. E.g. "medium-3 ":  12/3 = 25%

 

Examples:

 

  1. 100% width at a small screen sizes, 50% at larger sizes: class="small-12 medium-6"
  1. 50% width at small sizes, 33% at larger sizes: class="small-6 medium-4"
  1. 100% width at small sizes, 50% at medium sizes, 33% at larger sizes: class="medium-6 large-4"
  1. 100% width at small sizes, 33% at medium sizes, 100% at larger sizes: class="small-12 medium-4 large-12" 

 

For more information about Foundation's grid classes, please refer to the official documentation: http://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html




Keywords:WordPress, width, table, responsive, foundation, child theme, UW theme, WYSIWYG, editor   Doc ID:74690
Owner:Jonathan D.Group:WiscWeb CMS
Created:2017-07-20 11:32 CDTUpdated:2017-07-21 09:33 CDT
Sites:WiscWeb CMS
Feedback:  0   0