Improve table horizontal scrolling on mobile

assets/javascripts/templates/pages/about_tmpl.coffee

@@ -37,13 +37,15 @@ app.templates.aboutPage = -> """
     <li><a href="http://www.jeremykratz.com/">Jeremy Kratz</a> for the C/C++ logo
   </ul>
 
-  <table class="_credits">
+  <div class="_table">
-    <tr>
+    <table class="_credits">
-      <th>Documentation
+      <tr>
-      <th>Copyright
+        <th>Documentation
-      <th>License
+        <th>Copyright
-    #{("<tr><td>#{c[0]}<td>&copy; #{c[1]}<td><a href=\"#{c[3]}\">#{c[2]}</a>" for c in credits).join('')}
+        <th>License
-  </table>
+      #{("<tr><td>#{c[0]}<td>&copy; #{c[1]}<td><a href=\"#{c[3]}\">#{c[2]}</a>" for c in credits).join('')}
+    </table>
+  </div>
 
   <h2 class="_block-heading" id="faq">Questions & Answers</h2>
   <dl>

assets/javascripts/templates/pages/offline_tmpl.coffee

@@ -10,15 +10,17 @@ app.templates.offlinePage = (docs) -> """
     </div>
   </div>
 
-  <table class="_docs">
+  <div class="_table">
-    <tr>
+    <table class="_docs">
-      <th>Documentation</th>
+      <tr>
-      <th class="_docs-size">Size</th>
+        <th>Documentation</th>
-      <th>Status</th>
+        <th class="_docs-size">Size</th>
-      <th>Action</th>
+        <th>Status</th>
-    </tr>
+        <th>Action</th>
-    #{docs}
+      </tr>
-  </table>
+      #{docs}
+    </table>
+  </div>
   <p class="_note"><strong>Note:</strong> your browser may delete DevDocs's offline data if your computer is running low on disk space and you haven't used the app in a while. Load this page before going offline to make sure the data is still there.
   <h2 class="_block-heading">Questions & Answers</h2>
   <dl>

assets/stylesheets/components/_content.scss

@@ -373,6 +373,9 @@
 ._code { @extend %code; }
 ._highlight { background: $highlightBackground !important; }
 
+._table { width: 100%; }
+._mobile ._table { overflow-x: auto; }
+
 ._pre-clip {
   display: none;
   position: absolute;

assets/stylesheets/components/_mobile.scss

@@ -105,12 +105,6 @@
     max-width: none;
     margin-left: 0;
   }
-  
-  // Responsive browser compatibility tables
-  #compat-desktop,
-  #compat-mobile {
-    overflow-x: auto;
-  }
 }
 
 //

assets/stylesheets/pages/_mdn.scss

@@ -102,4 +102,6 @@
   .cleared { clear: both; } // CSS/box-shadow
 
   code > strong { font-weight: normal; }
+
+  #compat-desktop, #compat-mobile { @extend ._table; }
 }