docs: limit width of the document table (#4398)

docs/.vitepress/vitepress/components/vp-doc-content.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { useData } from 'vitepress'
-import { insertLinkIcon } from '../utils'
+import { insertLinkIcon, insertTableWrapper } from '../utils'
 import VPPageFooter from './doc-content/vp-page-footer.vue'
 import VPPageNav from './doc-content/vp-page-nav.vue'
 import VPTableOfContent from './doc-content/vp-table-of-content.vue'
@@ -9,8 +9,9 @@ import VPTableOfContent from './doc-content/vp-table-of-content.vue'
 const { page } = useData()
 const content = ref<{ $el: HTMLElement }>()
 
-function updateLink() {
+function updateDom() {
   insertLinkIcon(content)
+  insertTableWrapper(content)
 }
 </script>
 
@@ -20,8 +21,8 @@ function updateLink() {
       <Content
         ref="content"
         class="doc-content"
-        @vnode-mounted="updateLink"
-        @vnode-updated="updateLink"
+        @vnode-mounted="updateDom"
+        @vnode-updated="updateDom"
       />
       <VPPageFooter />
       <VPPageNav />

docs/.vitepress/vitepress/styles/base.scss

@@ -167,13 +167,16 @@ li > ol {
   margin: 0;
 }
 
-.doc-content > div {
-  > table {
+.doc-content > div .vp-table {
+  width: 100%;
+  overflow-y: hidden;
+  overflow-x: auto;
+  margin-bottom: 45px;
+  & > table {
     border-collapse: collapse;
     width: 100%;
     background-color: var(--bg-color);
     font-size: 14px;
-    margin-bottom: 45px;
     line-height: 1.5em;
 
     tr {

docs/.vitepress/vitepress/utils.ts

@@ -128,3 +128,19 @@ export function insertLinkIcon(contentRef: any) {
     }
   })
 }
+
+export function insertTableWrapper(contentRef: any) {
+  if (!inBrowser) return
+  const tables: HTMLTableElement[] = Array.from(
+    contentRef.value?.$el.querySelectorAll(
+      'table:not(.el-table__body):not(.el-table__header)'
+    ) ?? []
+  )
+  tables.forEach((table) => {
+    const wrapper = document.createElement('div')
+    wrapper.classList.add('vp-table')
+    table.parentNode!.insertBefore(wrapper, table)
+    table.parentNode!.removeChild(table)
+    wrapper.appendChild(table)
+  })
+}