improve mobile tables

docs/gridsome.config.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const visit = require('unist-util-visit')
 
 function addStyleResource(rule) {
   rule.use('style-resource')
@@ -10,6 +11,28 @@ function addStyleResource(rule) {
     })
 }
 
+function tableWrapper() {
+  return async tree => {
+    visit(
+      tree,
+      'table',
+      (node, index, parent) => {
+        if (node.type === 'table' && parent.type === 'root') {
+          const original = { ...node }
+
+          node.type = 'div'
+          node.children = [original]
+          node.data = {
+            hProperties: {
+              class: 'table-wrapper',
+            },
+          }
+        }
+      },
+    )
+  }
+}
+
 module.exports = {
   siteName: 'tiptap',
   titleTemplate: '%s | tiptap',
@@ -26,6 +49,7 @@ module.exports = {
           '@gridsome/remark-prismjs',
           'remark-container',
           'remark-toc',
+          tableWrapper,
         ],
         remark: {
           autolinkHeadings: {

docs/src/templates/DocPage/style.scss

@@ -82,7 +82,7 @@
     > p code,
     > ul code,
     > ol code,
-    > table code,
+    > .table-wrapper code,
     > .remark-container code {
       color: $colorYellow;
       background-color: rgba($colorYellow, 0.1);
@@ -92,7 +92,7 @@
     > p a,
     > ul a,
     > ol a,
-    > table a,
+    > .table-wrapper a,
     > .remark-container a {
       text-decoration: underline;
 
@@ -187,6 +187,12 @@
       }
     }
 
+    > .table-wrapper {
+      display: block;
+      width: 100%;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+
       > table {
         width: 100%;
         border-collapse: collapse;
@@ -196,6 +202,7 @@
         th,
         td {
           padding: 0.5rem;
+          min-width: 8rem;
 
           &:first-child {
             padding-left: 0;
@@ -207,6 +214,7 @@
         }
 
         th {
+          white-space: nowrap;
           color: $colorWhite;
           font-weight: 500;
           border-bottom: 1px solid rgba($colorWhite, 0.2);
@@ -230,6 +238,7 @@
           }
         }
       }
+    }
 
     > .remark-container {
       padding: 1.25rem;