adds table-container to colors, functions, mixins, and variables tables

docs/documentation/customize/variables.html

@@ -72,6 +72,7 @@ breadcrumb:
   </p>
 </div>
 
+<div class="table-container">
   <table class="table is-bordered">
     <tbody>
     {% for variable_name in initial_variables.list %}
@@ -80,6 +81,7 @@ breadcrumb:
     {% endfor %}
     <tbody>
   </table>
+</div>
 
 {% capture custom_message %}
   These are <a href="https://github.com/jgthms/bulma/blob/master/sass/{{ derived_variables.file_path }}" target="_blank" rel="nofollow">variables</a> with a value that <strong>references</strong> another variable.

docs/documentation/overview/colors.html

@@ -39,6 +39,7 @@ shades:
   </p>
 </div>
 
+<div class="table-container">
   <table class="table">
     <thead>
       <tr>
@@ -87,6 +88,7 @@ shades:
       {% endfor %}
     </tbody>
   </table>
+</div>
 
 <div class="content">
   <p>
@@ -94,6 +96,7 @@ shades:
   </p>
 </div>
 
+<div class="table-container">
   <table class="table">
     <thead>
       <tr>
@@ -119,3 +122,4 @@ shades:
       {% endfor %}
     </tbody>
   </table>
+</div>

docs/documentation/overview/functions.html

@@ -28,6 +28,7 @@ breadcrumb:
     <li>otherwise, it outputs <code>#fff</code></li>
   </ul>
   <p>Its purpose is to guarantee a <strong>readable</strong> shade for the <em>text</em> when the input color is used as the <em>background</em>.</p>
+  <div class="table-container">
     <table class="table is-bordered">
       <thead>
         <tr>
@@ -184,11 +185,13 @@ breadcrumb:
         </tr>
       </tbody>
     </table>
+  </div>
   <p>
     For colors that have a luminance close to the <code>0.55</code> threshold, it can be useful to <strong>override</strong> the <code>findColorInvert()</code> function, and rather set the invert color <strong>manually.</strong>
     <br>
     For example, this shade of <span class="bd-color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black:
   </p>
+  <div class="table-container">
     <table class="table is-bordered">
       <tbody>
         <tr>
@@ -228,3 +231,4 @@ breadcrumb:
       </tbody>
     </table>
   </div>
+</div>

docs/documentation/overview/mixins.html

@@ -10,6 +10,7 @@ breadcrumb:
 - overview-mixins
 ---
 
+<div class="table-container">
   <table class="table is-bordered">
     <tr>
       <td><code>=arrow($color)</code></td>
@@ -60,6 +61,7 @@ breadcrumb:
       <td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
     </tr>
   </table>
+</div>
 
 <div class="content">
   <p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>