style(table): add overflow-x for mobile tables with wrapper

Author: micahkepe

static/js/table-wrap.js

@@ -0,0 +1,8 @@
+document.querySelectorAll("article[itemprop='articleBody'] > table").forEach(function (table) {
+  var wrapper = document.createElement("figure");
+  wrapper.style.overflowX = "auto";
+  wrapper.style.webkitOverflowScrolling = "touch";
+  wrapper.style.margin = "0";
+  table.parentNode.insertBefore(wrapper, table);
+  wrapper.appendChild(table);
+});

templates/_base.html

@@ -154,6 +154,7 @@
       {% if config.extra.theme %}
         <script src="{{ get_url(path='js/toggle-theme.js', trailing_slash=false) | safe }}"></script>
       {% endif %}
+      <script defer src="{{ get_url(path='js/table-wrap.js', trailing_slash=false) | safe }}"></script>
       {% include "partials/latex.html" %}
       {% include "partials/search.html" %}
     {% endblock scripts %}