fix(markdown): make table scrollable (theme-next#598)

* fix(markdown): make table scrollable * fix: wrap table with .table-container
tongluyang · Feb 10, 2019 · c828b34 · c828b34
1 parent 948d5f3
commit c828b34
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/source/css/_common/scaffolding/tables.styl b/source/css/_common/scaffolding/tables.styl
@@ -1,11 +1,14 @@
-table {
+.table-container {
   margin: 20px 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+table {
   width: $table-width;
   border-collapse: collapse;
   border-spacing: 0;
-  border: 1px solid $table-border-color;
   font-size: $table-font-size;
-  word-break: break-all;
 }
 
 table>tbody>tr {
@@ -21,8 +24,8 @@ caption, th, td {
 }
 
 th, td {
+  border: 1px solid $table-border-color;
   border-bottom: 3px solid $table-cell-border-bottom-color;
-  border-right: 1px solid $table-cell-border-right-color;
 }
 
 th {

diff --git a/source/js/src/utils.js b/source/js/src/utils.js
@@ -291,6 +291,10 @@ NexT.utils = NexT.$u = {
 
 $(document).ready(function() {
 
+  function wrapTable() {
+    $('table').wrap('<div class="table-container"></div>');
+  }
+
   /**
    * Init Sidebar & TOC inner dimensions on all pages and for all schemes.
    * Need for Sidebar/TOC inner scrolling if content taller then viewport.
@@ -327,4 +331,5 @@ $(document).ready(function() {
     updateSidebarHeight(document.body.clientHeight - NexT.utils.getSidebarSchemePadding());
   }
   initSidebarDimension();
+  wrapTable();
 });