fix: fixed table content overflow container (#273)

Author: XPoet

source/css/common/basic.styl

@@ -19,7 +19,7 @@
 
   &::-webkit-scrollbar {
     width 0.4rem
-    height 0.4rem
+    height 0.32rem
     transition all 0.2s ease
   }
 

source/css/common/markdown.styl

@@ -281,40 +281,52 @@
   }
 
 
-  & > table {
+  & > .table-container {
+    box-sizing border-box
     width 100%
+    margin 1.5rem 0
     overflow auto
-    border-collapse collapse
-    border-spacing 0
 
-    +keep-mobile() {
-      & {
-        table-layout fixed
+    table {
+      box-sizing border-box
+      width 100%
+      border-collapse collapse
+      border-spacing 0
+
+      +keep-mobile() {
+        & {
+          table-layout fixed
+        }
       }
-    }
 
-    td
-    th {
-      padding 0
-    }
+      td
+      th {
+        padding 0
+      }
 
-    th {
-      font-weight 600
-    }
+      td {
+        color var(--text-color-3)
+      }
 
-    td
-    th {
-      padding 0.4rem 1rem
-      border 0.1rem solid var(--border-color)
-    }
+      th {
+        color var(--text-color-2)
+        font-weight 600
+      }
 
-    tr {
-      background-color var(--background-color-1)
-      border 0.1rem solid var(--text-color-6)
-    }
+      td
+      th {
+        padding 0.5rem 1rem
+        border 0.1rem solid var(--border-color)
+      }
+
+      tr {
+        background-color var(--background-color-1)
+        border 0.1rem solid var(--border-color)
+      }
 
-    tr:nth-child(2n) {
-      background-color var(--background-color-2)
+      tr:nth-child(2n) {
+        background-color var(--background-color-2)
+      }
     }
   }
 

source/js/code-block.js

@@ -3,12 +3,6 @@
 KEEP.initCodeBlock = () => {
   if (KEEP.theme_config?.code_block?.tools?.enable === true) {
     KEEP.utils.initCodeBlockTools = () => {
-      HTMLElement.prototype.wrap = function (wrapper) {
-        this.parentNode.insertBefore(wrapper, this)
-        this.parentNode.removeChild(this)
-        wrapper.appendChild(this)
-      }
-
       const { style: codeBlockStyle } = KEEP.theme_config?.code_block || {}
       const { style: codeBlockToolsStyle } = KEEP.theme_config?.code_block?.tools || {}
 

source/js/main.js

@@ -1,20 +1,18 @@
 /* global KEEP */
 
 window.addEventListener('DOMContentLoaded', () => {
-  const { version, local_search, code_block, lazyload } = KEEP.theme_config
+  const { version, local_search, lazyload } = KEEP.theme_config
 
   KEEP.themeInfo = {
     theme: `Keep v${version}`,
     author: 'XPoet',
-    repository: 'https://github.com/XPoet/hexo-theme-keep'
-  }
-
-  KEEP.localStorageKey = 'KEEP-THEME-STATUS'
-
-  KEEP.styleStatus = {
-    isDark: false,
-    fontSizeLevel: 0,
-    isShowToc: true
+    repository: 'https://github.com/XPoet/hexo-theme-keep',
+    localStorageKey: 'KEEP-THEME-STATUS',
+    styleStatus: {
+      isDark: false,
+      fontSizeLevel: 0,
+      isShowToc: true
+    }
   }
 
   // print theme base info
@@ -37,23 +35,33 @@ window.addEventListener('DOMContentLoaded', () => {
 
   // set styleStatus to localStorage
   KEEP.setStyleStatus = () => {
-    localStorage.setItem(KEEP.localStorageKey, JSON.stringify(KEEP.styleStatus))
+    localStorage.setItem(KEEP.themeInfo.localStorageKey, JSON.stringify(KEEP.themeInfo.styleStatus))
   }
 
   // get styleStatus from localStorage
   KEEP.getStyleStatus = () => {
-    let temp = localStorage.getItem(KEEP.localStorageKey)
+    let temp = localStorage.getItem(KEEP.themeInfo.localStorageKey)
     if (temp) {
       temp = JSON.parse(temp)
-      for (let key in KEEP.styleStatus) {
-        KEEP.styleStatus[key] = temp[key]
+      for (let key in KEEP.themeInfo.styleStatus) {
+        KEEP.themeInfo.styleStatus[key] = temp[key]
       }
       return temp
     } else {
       return null
     }
   }
 
+  // init prototype function
+  KEEP.initPrototype = () => {
+    HTMLElement.prototype.wrap = function (wrapper) {
+      this.parentNode.insertBefore(wrapper, this)
+      this.parentNode.removeChild(this)
+      wrapper.appendChild(this)
+    }
+  }
+  KEEP.initPrototype()
+
   KEEP.initExecute = () => {
     KEEP.initUtils()
     KEEP.initHeaderShrink()

source/js/post/post-helper.js

@@ -15,7 +15,7 @@ function initPostHelper() {
       this.toggleShowTocBtn &&
         this.toggleShowTocBtn.addEventListener('click', () => {
           this.isShowToc = !this.isShowToc
-          KEEP.styleStatus.isShowToc = this.isShowToc
+          KEEP.themeInfo.styleStatus.isShowToc = this.isShowToc
           KEEP.setStyleStatus()
           this.handleToggleToc(this.isShowToc)
         })

source/js/toggle-theme.js

@@ -9,15 +9,15 @@ KEEP.initModeToggle = () => {
       document.body.classList.remove('dark-mode')
       document.body.classList.add('light-mode')
       this.iconDom.className = 'fas fa-moon'
-      KEEP.styleStatus.isDark = false
+      KEEP.themeInfo.styleStatus.isDark = false
       KEEP.setStyleStatus()
     },
 
     enableDarkMode() {
       document.body.classList.add('dark-mode')
       document.body.classList.remove('light-mode')
       this.iconDom.className = 'fas fa-sun'
-      KEEP.styleStatus.isDark = true
+      KEEP.themeInfo.styleStatus.isDark = true
       KEEP.setStyleStatus()
     },
 

source/js/utils.js

@@ -154,7 +154,7 @@ KEEP.initUtils = () => {
           `${fs * (1 + fontSizeLevel * 0.05)}px`,
           'important'
         )
-        KEEP.styleStatus.fontSizeLevel = fontSizeLevel
+        KEEP.themeInfo.styleStatus.fontSizeLevel = fontSizeLevel
         KEEP.setStyleStatus()
       }
 
@@ -671,6 +671,15 @@ KEEP.initUtils = () => {
           })
         }
       }
+    },
+
+    // wrap table dom with div
+    wrapTableWithBox() {
+      document.querySelectorAll('table').forEach((element) => {
+        const box = document.createElement('div')
+        box.className = 'table-container'
+        element.wrap(box)
+      })
     }
   }
 
@@ -688,4 +697,5 @@ KEEP.initUtils = () => {
   KEEP.utils.initTypewriter()
   KEEP.utils.trimPostMetaInfoBar()
   KEEP.utils.closeWebsiteAnnouncement()
+  KEEP.utils.wrapTableWithBox()
 }