Responsivey docs table for grid section

assets/css/docs.css

@@ -545,6 +545,36 @@ body {
 /* Responsive docs
 -------------------------------------------------- */
 
+/* Responsive (scrollable) doc tables */
+@media (max-width: 768px) {
+  .bs-table-scrollable {
+    width: 100%;
+    overflow-y: hidden;
+    overflow-x: scroll;
+    border: 1px solid #ddd;
+  }
+  .bs-table-scrollable .bs-table {
+    margin-bottom: 0;
+    border: 0;
+  }
+  .bs-table-scrollable .bs-table th,
+  .bs-table-scrollable .bs-table td {
+    white-space: nowrap;
+  }
+  .bs-table-scrollable .bs-table th:first-child,
+  .bs-table-scrollable .bs-table td:first-child {
+    border-left: 0;
+  }
+  .bs-table-scrollable .bs-table th:last-child,
+  .bs-table-scrollable .bs-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 {
+    border-bottom: 0;
+  }
+}
+
 /* Related: responsive utilities tables */
 .table code {
   font-size: 13px;

css.html

@@ -78,6 +78,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
 
     <h3 id="grid-options">Grid options</h3>
     <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
+    <div class="bs-table-scrollable">
       <table class="table table-bordered table-striped bs-table">
         <thead>
           <tr>
@@ -128,6 +129,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
           </tr>
         </tbody>
       </table>
+    </div>
 
     <h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3>
     <p>Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.</p>