From 70fa8ef4b04eeacc64d25477f4c5391b9385d4fb Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 26 Jul 2013 21:28:44 -0700
Subject: Responsivey docs table for grid section

---
 assets/css/docs.css |  30 ++++++++++++++++
 css.html            | 102 ++++++++++++++++++++++++++--------------------------
 2 files changed, 82 insertions(+), 50 deletions(-)

diff --git a/assets/css/docs.css b/assets/css/docs.css
index 8783e81498..307e8d07e3 100644
--- a/assets/css/docs.css
+++ b/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;
diff --git a/css.html b/css.html
index 0c41d4af01..35148bcaba 100644
--- a/css.html
+++ b/css.html
@@ -78,56 +78,58 @@ 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>
-    <table class="table table-bordered table-striped bs-table">
-      <thead>
-        <tr>
-          <th></th>
-          <th>
-            Tiny grid
-            <small>Phones (&lt;480px)</small>
-          </th>
-          <th>
-            Small grid
-            <small>Tablets (&lt;768px)</small>
-          </th>
-          <th>
-            Medium-large grid
-            <small>Destkops (&gt;768px)</small>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <th>Grid behavior</th>
-          <td>Horizontal at all times</td>
-          <td colspan="2">Collapsed to start, horizontal above breakpoints</td>
-        </tr>
-        <tr>
-          <th>Class prefix</th>
-          <td><code>.col-</code></td>
-          <td><code>.col-sm-</code></td>
-          <td><code>.col-lg-</code></td>
-        </tr>
-        <tr>
-          <th># of columns</th>
-          <td colspan="3">12</td>
-        </tr>
-        <tr>
-          <th>Nestable</th>
-          <td colspan="3">Yes</td>
-        </tr>
-        <tr>
-          <th>Offsets</th>
-          <td colspan="2" class="text-muted">N/A</td>
-          <td>Yes</td>
-        </tr>
-        <tr>
-          <th>Column ordering</th>
-          <td class="text-muted">N/A</td>
-          <td colspan="2">Yes</td>
-        </tr>
-      </tbody>
-    </table>
+    <div class="bs-table-scrollable">
+      <table class="table table-bordered table-striped bs-table">
+        <thead>
+          <tr>
+            <th></th>
+            <th>
+              Tiny grid
+              <small>Phones (&lt;480px)</small>
+            </th>
+            <th>
+              Small grid
+              <small>Tablets (&lt;768px)</small>
+            </th>
+            <th>
+              Medium-large grid
+              <small>Destkops (&gt;768px)</small>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th>Grid behavior</th>
+            <td>Horizontal at all times</td>
+            <td colspan="2">Collapsed to start, horizontal above breakpoints</td>
+          </tr>
+          <tr>
+            <th>Class prefix</th>
+            <td><code>.col-</code></td>
+            <td><code>.col-sm-</code></td>
+            <td><code>.col-lg-</code></td>
+          </tr>
+          <tr>
+            <th># of columns</th>
+            <td colspan="3">12</td>
+          </tr>
+          <tr>
+            <th>Nestable</th>
+            <td colspan="3">Yes</td>
+          </tr>
+          <tr>
+            <th>Offsets</th>
+            <td colspan="2" class="text-muted">N/A</td>
+            <td>Yes</td>
+          </tr>
+          <tr>
+            <th>Column ordering</th>
+            <td class="text-muted">N/A</td>
+            <td colspan="2">Yes</td>
+          </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>
-- 
cgit v1.2.3