stack tables on mobile

Option to stack on small devices.
Hide current table headers.
Add headers to rows.
Will need to add divs above tables to id each table for naming.  Only did 2 tables in this as a test.
Other tables will hide headers completely and full width content.

content/concepts/payment-system-basics/accounts/accounts.md

@@ -51,6 +51,8 @@ For more technical details of how to calculate an XRP Ledger address, see [Addre
 
 Some addresses have special meaning, or historical uses, in the XRP Ledger. In many cases, these are "black hole" addresses, meaning the address is not derived from a known secret key. Since it is effectively impossible to guess a secret key from only an address, any XRP possessed by black hole addresses is lost forever.
 
+<div id="table_accounts"></div>
+
 | Address                       | Name | Meaning | Black Hole? |
 |-------------------------------|------|---------|-------------|
 | `rrrrrrrrrrrrrrrrrrrrrhoLvTp` | ACCOUNT\_ZERO | An address that is the XRP Ledger's [base58][] encoding of the value `0`. In peer-to-peer communications, `rippled` uses this address as the issuer for XRP. | Yes |

content/concepts/payment-system-basics/ledgers.md

@@ -32,6 +32,8 @@ In the case of transactions, the identifying hash is based on the signed transac
 
 The `rippled` server makes a distinction between ledger versions that are _open_, _closed_, and _validated_. A server has one open ledger, any number of closed but unvalidated ledgers, and an immutable history of validated ledgers. The following table summarizes the difference:
 
+<div id="table_ledgers"></div>
+
 | Ledger Type:                      | Open                        | Closed                                     | Validated |
 |:---------------------------------|:----------------------------|:-------------------------------------------|:--|
 | **Purpose:**                     | Temporary workspace         | Proposed next state                        | Confirmed previous state |

styles/_content.scss

@@ -93,38 +93,6 @@ a.card,
 }
 
 
-
-/* Tables ------------------------------- */
-
-.content table {
-  clear: right;
-  margin-bottom: 48px;
-}
-
-.content table code {
-  word-break: normal;
-  white-space: nowrap;
-}
-
-th {
-  border-bottom: 2px solid $gray-200;
-}
-tr {
-  border-bottom: 1px solid $gray-200;
-}
-
-th, td {
-  padding: 0.2em;
-  vertical-align: text-top;
-  padding: 12px;
-}
-
-td:nth-child(1) {
-  font-weight: bold;
-}
-
-
-
 /* Cards ------------------------------- */
 .card {
   background-color: transparent;

styles/_tables.scss

@@ -1,4 +1,104 @@
 /* TABLE STYLING */
+
+.content table {
+  clear: right;
+  margin-bottom: 48px;
+}
+
+.content table code {
+  word-break: normal;
+  white-space: nowrap;
+}
+
+th {
+  border-bottom: 2px solid $gray-200;
+}
+tr {
+  border-bottom: 1px solid $gray-200;
+}
+
+th, td {
+  padding: 0.2em;
+  vertical-align: text-top;
+  padding: 12px;
+}
+
+td:nth-child(1) {
+  font-weight: bold;
+}
+
+
+// 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;
 }