WiscWeb - WordPress UW Theme - 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.
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:
- {screen size} - {element size}
- E.g. "medium-6 ": At a medium screen size the element's width is 50%
- E.g. "large-4 ": At a large screen size the element's width is 33%
- Element sizes are defined along a 12 column grid:
- E.g. "medium-12 ": 12/12 = 100%
- E.g. "medium-9 ": 12/9 = 75%
- E.g. "medium-6 ": 12/6 = 50%
- E.g. "medium-3 ": 12/3 = 25%
Examples:
- 100% width at a small screen sizes, 50% at larger sizes: class="small-12 medium-6"
- 50% width at small sizes, 33% at larger sizes: class="small-6 medium-4"
- 100% width at small sizes, 50% at medium sizes, 33% at larger sizes: class="medium-6 large-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