mo tables mo responsive or whatever the hell that means

2 files changed, 35 insertions, 32 deletions

diff --git a/assets/css/docs.css b/assets/css/docs.css
index 307e8d07e..8843d2480 100644
--- a/assets/css/docs.css
+++ b/assets/css/docs.css
@@ -549,28 +549,29 @@ body {
 @media (max-width: 768px) {
   .bs-table-scrollable {
     width: 100%;
+    margin-bottom: 15px;
     overflow-y: hidden;
     overflow-x: scroll;
     border: 1px solid #ddd;
   }
-  .bs-table-scrollable .bs-table {
+  .bs-table-scrollable .table {
     margin-bottom: 0;
     border: 0;
   }
-  .bs-table-scrollable .bs-table th,
-  .bs-table-scrollable .bs-table td {
+  .bs-table-scrollable .table th,
+  .bs-table-scrollable .table td {
     white-space: nowrap;
   }
-  .bs-table-scrollable .bs-table th:first-child,
-  .bs-table-scrollable .bs-table td:first-child {
+  .bs-table-scrollable .table th:first-child,
+  .bs-table-scrollable .table td:first-child {
     border-left: 0;
   }
-  .bs-table-scrollable .bs-table th:last-child,
-  .bs-table-scrollable .bs-table td:last-child {
+  .bs-table-scrollable .table th:last-child,
+  .bs-table-scrollable .table td:last-child {
     border-right: 0;
   }
-  .bs-table-scrollable .bs-table tr:last-child th,
-  .bs-table-scrollable .bs-table tr:last-child td {
+  .bs-table-scrollable .table tr:last-child th,
+  .bs-table-scrollable .table tr:last-child td {
     border-bottom: 0;
   }
 }
@@ -608,7 +609,7 @@ body {
 ------------------------- */
 .responsive-utilities-test {
   margin-top: 5px;
-  margin-left: 0;
+  padding-left: 0;
   list-style: none;
   overflow: hidden; /* clear floats */
 }
diff --git a/css.html b/css.html
index e4378434a..d2e552e9a 100644
--- a/css.html
+++ b/css.html
@@ -2086,7 +2086,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
 
     <h3>Responsive classes</h3>
-    <div class="hidden-sm">
+    <div class="bs-scrollable-table">
       <table class="table table-bordered table-striped responsive-utilities">
         <thead>
           <tr>
@@ -2138,27 +2138,29 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
     <h3>Print classes</h3>
-    <table class="table table-bordered table-striped responsive-utilities">
-      <thead>
-        <tr>
-          <th>Class</th>
-          <th>Browser</th>
-          <th>Print</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <th><code>.visible-print</code></th>
-          <td class="is-hidden">Hidden</td>
-          <td class="is-visible">Visible</td>
-        </tr>
-        <tr>
-          <th><code>.hidden-print</code></th>
-          <td class="is-visible">Visible</td>
-          <td class="is-hidden">Hidden</td>
-        </tr>
-      </tbody>
-    </table>
+    <div class="bs-scrollable-table">
+      <table class="table table-bordered table-striped responsive-utilities">
+        <thead>
+          <tr>
+            <th>Class</th>
+            <th>Browser</th>
+            <th>Print</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th><code>.visible-print</code></th>
+            <td class="is-hidden">Hidden</td>
+            <td class="is-visible">Visible</td>
+          </tr>
+          <tr>
+            <th><code>.hidden-print</code></th>
+            <td class="is-visible">Visible</td>
+            <td class="is-hidden">Hidden</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
 
     <h3>When to use</h3>
     <p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block-level toggling, meaning <code>display: none;</code> or <code>display: block;</code>. Use with inline and table elements is currently not supported.</p>