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

docs/documentation/customize/variables.html

@@ -72,14 +72,16 @@ breadcrumb:
   </p>
 </div>
 
-<table class="table is-bordered">
+<div class="table-container">
+  <table class="table is-bordered">
     <tbody>
     {% for variable_name in initial_variables.list %}
       {% assign variable = initial_vars[variable_name] %}
       {% include elements/variable-row.html variable=variable hide_computed =true%}
     {% endfor %}
     <tbody>
-</table>
+  </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,7 +39,8 @@ shades:
   </p>
 </div>
 
-<table class="table">
+<div class="table-container">
+  <table class="table">
     <thead>
       <tr>
         <th>Color</th>
@@ -86,7 +87,8 @@ shades:
         </tr>
       {% endfor %}
     </tbody>
-</table>
+  </table>
+</div>
 
 <div class="content">
   <p>
@@ -94,7 +96,8 @@ shades:
   </p>
 </div>
 
-<table class="table">
+<div class="table-container">
+  <table class="table">
     <thead>
       <tr>
         <th>Color</th>
@@ -118,4 +121,5 @@ shades:
         </tr>
       {% endfor %}
     </tbody>
-</table>
+  </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>
@@ -227,4 +230,5 @@ breadcrumb:
         </tr>
       </tbody>
     </table>
+  </div>
 </div>

docs/documentation/overview/mixins.html

@@ -10,7 +10,8 @@ breadcrumb:
 - overview-mixins
 ---
 
-<table class="table is-bordered">
+<div class="table-container">
+  <table class="table is-bordered">
     <tr>
       <td><code>=arrow($color)</code></td>
       <td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
@@ -59,7 +60,8 @@ breadcrumb:
       <td><code>=unselectable</code></td>
       <td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
     </tr>
-</table>
+  </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>