Improve table horizontal scrolling on mobile

assets/javascripts/templates/pages/about_tmpl.coffee

@@ -37,6 +37,7 @@ app.templates.aboutPage = -> """
     <li><a href="http://www.jeremykratz.com/">Jeremy Kratz</a> for the C/C++ logo
   </ul>
 
+  <div class="_table">
     <table class="_credits">
       <tr>
         <th>Documentation
@@ -44,6 +45,7 @@ app.templates.aboutPage = -> """
         <th>License
       #{("<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,6 +10,7 @@ app.templates.offlinePage = (docs) -> """
     </div>
   </div>
 
+  <div class="_table">
     <table class="_docs">
       <tr>
         <th>Documentation</th>
@@ -19,6 +20,7 @@ app.templates.offlinePage = (docs) -> """
       </tr>
       #{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; }
 }