Add responsive wrappers for tables (#533)

* Add responsive wrappers for tables

* Add missing styles

source/_static/js/main.js

@@ -334,4 +334,20 @@ window.addEventListener("DOMContentLoaded", (event) => {
       }
     }
   })();
+
+
+  // --------------------------------------------------
+  // Responsive tables
+  // --------------------------------------------------
+  (function () {
+    const tableEls = document.querySelectorAll("table");
+    if(tableEls.length > 0) {
+      tableEls.forEach((item) => {
+        var tableWrapper = document.createElement("div");
+        tableWrapper.classList.add("table-responsive");
+        item.insertAdjacentElement("beforebegin", tableWrapper);
+        tableWrapper.appendChild(item);
+      });
+    }
+  })();
 });

source/_static/scss/includes/_alert.scss

@@ -29,6 +29,10 @@ div.admonition {
 
     code {
         color: currentColor;
+
+        &.xref {
+            border: 0;
+        }
     }
 
     .highlight {

source/_static/scss/includes/_header.scss

@@ -143,7 +143,7 @@
 			}
 
 			@include breakpoint-max(breakpoints(lg)) {
-				top: 10rem
+				top: 7.2rem
 			}
 
 			&:not(.active) {

source/_static/scss/includes/_reset.scss

@@ -208,6 +208,31 @@ table.docutils {
 }
 
 
+.table-responsive {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin: 1rem 0 2rem;
+    border-left: 1px solid var(--table-border-color);
+    border-right: 1px solid var(--table-border-color);
+
+    table {
+        margin: 0;
+
+        tr {
+            td, th {
+                &:first-child {
+                    border-left-color: transparent;
+                }
+
+                &:last-child {
+                    border-right-color: transparent;
+                }
+            }
+        }
+    }
+}
+
+
 // ----------------------
 // Form
 // ----------------------