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,46 +187,55 @@
       }
     }
 
-    > table {
+    > .table-wrapper {
+      display: block;
       width: 100%;
-      border-collapse: collapse;
+      overflow-x: auto;
-      font-size: 0.85rem;
+      -webkit-overflow-scrolling: touch;
-      text-align: left;
 
-      th,
+      > table {
-      td {
+        width: 100%;
-        padding: 0.5rem;
+        border-collapse: collapse;
+        font-size: 0.85rem;
+        text-align: left;
 
-        &:first-child {
+        th,
-          padding-left: 0;
+        td {
+          padding: 0.5rem;
+          min-width: 8rem;
+
+          &:first-child {
+            padding-left: 0;
+          }
+
+          &:last-child {
+            padding-right: 0;
+          }
         }
 
-        &:last-child {
+        th {
-          padding-right: 0;
+          white-space: nowrap;
+          color: $colorWhite;
+          font-weight: 500;
+          border-bottom: 1px solid rgba($colorWhite, 0.2);
         }
-      }
 
-      th {
+        td {
-        color: $colorWhite;
+          border-bottom: 1px solid rgba($colorWhite, 0.1);
-        font-weight: 500;
+        }
-        border-bottom: 1px solid rgba($colorWhite, 0.2);
-      }
 
-      td {
+        tr:last-child td {
-        border-bottom: 1px solid rgba($colorWhite, 0.1);
-      }
-
-      tr:last-child td {
-        border-bottom: 0;
-      }
-
-      tbody tr {
-        &:last-child td {
           border-bottom: 0;
         }
 
-        &:hover {
+        tbody tr {
-          background: rgba($colorWhite, 0.02);
+          &:last-child td {
+            border-bottom: 0;
+          }
+
+          &:hover {
+            background: rgba($colorWhite, 0.02);
+          }
         }
       }
     }