Change to adding bootstrap class to tables

Will add the responsive class to all tables

assets/js/tables.js

@@ -0,0 +1,8 @@
+// Add class to tables for scrolling on small devices
+jQuery(document).ready(function($) {
+    var alterClass = function() {
+        $('table').addClass('table-responsive');
+    };
+    //Fire it when the page first loads:
+    alterClass();
+  });

styles/_tables.scss

@@ -28,76 +28,6 @@ td:nth-child(1) {
 }
 
 
-// Tables on mobile
-@include media-breakpoint-down(md) {
-  
-  /* Force table to not be like tables anymore */
-  table, thead, tbody, th, td, tr {
-    display: block;
-  }
-
-  /* Hide table headers (but not display: none;, for accessibility) */
-
-  thead tr {
-    position: absolute;
-    top: -9999px;
-    left: -9999px;
-  }
-
-  tr {
-    margin: 0 0 1rem 0;
-  }
-    
-  tr:nth-child(odd) {
-    background: #151515;
-  }
-  
-  td {
-    /* Behave  like a "row" */
-    border: none;
-    border-bottom: 1px solid #eee;
-    position: relative;
-    // padding-left: 25%;
-  }
-
-  td:before {
-    position: absolute;
-    /* Top/left values mimic padding */
-    top: 12px;
-    left: 6px;
-    width: 25%;
-    padding-right: 10px;
-    white-space: nowrap;
-  }
-
-  // display headers inline. 
-  #table_accounts + table {
-
-    td {
-      padding-left: 25%;
-    }
-
-    td:nth-of-type(1):before { content: "Address"; }
-		td:nth-of-type(2):before { content: "Name"; }
-		td:nth-of-type(3):before { content: "Meaning"; }
-		td:nth-of-type(4):before { content: "Black Hole?"; }
-  }
-  #table_ledgers + table {
-    td {
-      padding-left: 25%;
-    }
-    td:nth-of-type(1):before { content: "Ledger Type:"; }
-		td:nth-of-type(2):before { content: "Open"; }
-		td:nth-of-type(3):before { content: "Closed"; }
-		td:nth-of-type(4):before { content: "Validated"; }
-  }
-
-
-
-
-}
-
-
 
 .dblue {
   color: #656E81;

tool/template-base.html

@@ -123,6 +123,8 @@
 <!-- Non-blocking resources -->
 <!-- Bootstrap JS -->
 <script src="{{currentpage.prefix}}assets/vendor/bootstrap.min.js"></script>
+<!-- Add responsive class to tables -->
+<script type="application/javascript" src="{{currentpage.prefix}}assets/js/tables.js"></script>
 <!-- fontawesome icons -->
 <link rel="stylesheet" href="{{currentpage.prefix}}assets/vendor/fontawesome/css/font-awesome.min.css" />