WiscWeb - WordPress UW Theme - Responsive HTML Table Widths

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

Step 2) 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.

 

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"

2. 50% width at small sizes, 33% at larger sizes: class="small-6 medium-4"

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

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